import { cn } from "@/lib/utils";

interface TeamMember {
  name: string;
  role: string;
  image: string;
}

interface Team36Props {
  heading?: string;
  members?: TeamMember[];
  className?: string;
}

const Team36 = ({
  heading = "سرمایه‌گذاران ما",
  members = [
    {
      name: "آرش پاکزاد",
      role: "بلک‌برد ونچرز",
      image:
        "/block-media/shadcnblocks/block/avatar/avatar5.jpg",
    },
    {
      name: "رامین صادقی",
      role: "مرکز مطالعات",
      image:
        "/block-media/shadcnblocks/block/avatar/avatar-2.webp",
    },
    {
      name: "لیلا محمدی",
      role: "تک‌نکسوس",
      image:
        "/block-media/shadcnblocks/block/avatar/avatar-3.webp",
    },
    {
      name: "مهدی کریمی",
      role: "اتومول کپیتال",
      image:
        "/block-media/shadcnblocks/block/avatar/avatar-4.webp",
    },
    {
      name: "نیلوفر احمدی",
      role: "وندربرگ",
      image:
        "/block-media/shadcnblocks/block/avatar/avatar-5.webp",
    },
  ],
  className,
}: Team36Props) => {
  return (
    <section
      dir="rtl"
      lang="fa"
      className={cn("container max-w-5xl py-12", className)}
    >
      <h2 className="text-start text-xl font-medium tracking-wide text-foreground">
        {heading}
      </h2>
      <div className="mt-8 grid grid-cols-2 gap-12 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5">
        {members.map((member) => (
          <div key={member.name} className="text-start">
            <img
              src={member.image}
              alt={member.name}
              className="size-30 object-cover"
            />
            <h3 className="mt-3 font-semibold">{member.name}</h3>
            <p className="text-muted-foreground">{member.role}</p>
          </div>
        ))}
      </div>
    </section>
  );
};

export { Team36 };