import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { cn } from "@/lib/utils";

interface TeamMember {
  id: string;
  name: string;
  role: string;
  avatar: string;
}

interface Team1Props {
  heading?: string;
  subheading?: string;
  description?: string;
  members?: TeamMember[];
  className?: string;
}

const Team1 = ({
  heading = "تیمی که CRM فروش را می‌سازد",
  description = "از معماری داده تا تجربه کاربری؛ محصولی که قیف، پیگیری و گزارش فروش را در یک فضای کاری یکپارچه می‌کند.",
  members = [
    {
      id: "member-1",
      name: "سارا احمدی",
      role: "هم‌بنیان‌گذار و مدیرعامل",
      avatar:
        "/block-media/shadcnblocks/block/avatar-1.webp",
    },
    {
      id: "member-2",
      name: "امیر رضایی",
      role: "مدیر فناوری",
      avatar:
        "/block-media/shadcnblocks/block/avatar-2.webp",
    },
    {
      id: "member-3",
      name: "مریم حسینی",
      role: "مدیر طراحی محصول",
      avatar:
        "/block-media/shadcnblocks/block/avatar-3.webp",
    },
    {
      id: "member-4",
      name: "علی محمدی",
      role: "مهندس ارشد محصول",
      avatar:
        "/block-media/shadcnblocks/block/avatar-4.webp",
    },
    {
      id: "member-5",
      name: "نازنین طاهری",
      role: "مدیر محصول",
      avatar:
        "/block-media/shadcnblocks/block/avatar-5.webp",
    },
    {
      id: "member-6",
      name: "پویا جعفری",
      role: "طراح محصول",
      avatar:
        "/block-media/shadcnblocks/block/avatar-6.webp",
    },
  ],
  className,
}: Team1Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container flex flex-col items-center text-center">
        <h2 className="my-6 text-xl font-bold text-pretty lg:text-xl">
          {heading}
        </h2>
        <p className="mb-8 max-w-3xl text-muted-foreground lg:text-xl">
          {description}
        </p>
      </div>
      <div className="container mt-16 grid gap-x-8 gap-y-16 md:grid-cols-2 lg:grid-cols-3">
        {members.map((member) => (
          <div key={member.id} className="flex flex-col items-center">
            <Avatar className="mb-4 size-20 border md:mb-5 lg:size-24">
              <AvatarImage src={member.avatar} alt={member.name} />
              <AvatarFallback>{member.name}</AvatarFallback>
            </Avatar>
            <p className="text-center font-medium">{member.name}</p>
            <p className="text-center text-muted-foreground">{member.role}</p>
          </div>
        ))}
      </div>
    </section>
  );
};

export { Team1 };