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

const members = [
  {
    name: "سارا احمدی",
    image:
      "/block-media/shadcnblocks/block/avatar-1.webp",
    role: "مدیرعامل",
  },
  {
    name: "امیر رضایی",
    image:
      "/block-media/shadcnblocks/block/avatar-2.webp",
    role: "مدیر فناوری",
  },
  {
    name: "مریم حسینی",
    image:
      "/block-media/shadcnblocks/block/avatar-3.webp",
    role: "مدیر محصول",
  },
  {
    name: "علی محمدی",
    image:
      "/block-media/shadcnblocks/block/avatar-4.webp",
    role: "مهندس ارشد محصول",
  },
  {
    name: "پویا جعفری",
    image:
      "/block-media/shadcnblocks/block/avatar-5.webp",
    role: "طراح محصول",
  },
  {
    name: "دانیال ویلسونی",
    image:
      "/block-media/shadcnblocks/block/avatar-6.webp",
    role: "مهندس داده",
  },
  {
    name: "لیلا کریمی",
    image:
      "/block-media/shadcnblocks/block/avatar-7.webp",
    role: "طراح رابط کاربری",
  },
  {
    name: "نازنین طاهری",
    image:
      "/block-media/shadcnblocks/block/avatar-3.webp",
    role: "مهندس دواپس",
  },
  {
    name: "زهرا دیو",
    image:
      "/block-media/shadcnblocks/block/avatar-1.webp",
    role: "مدیر محصول",
  },
  {
    name: "رضا مارتین",
    image:
      "/block-media/shadcnblocks/block/avatar-2.webp",
    role: "مدیر کل",
  },
  {
    name: "ژیلا سفید",
    image:
      "/block-media/shadcnblocks/block/avatar-3.webp",
    role: "مدیر منابع انسانی",
  },
  {
    name: "وحید کلارک",
    image:
      "/block-media/shadcnblocks/block/avatar-4.webp",
    role: "مدیر فروش",
  },
  {
    name: "پریسا معمار",
    image:
      "/block-media/shadcnblocks/block/avatar-7.webp",
    role: "مدیر شبکه‌های اجتماعی",
  },
  {
    name: "توماج لی",
    image:
      "/block-media/shadcnblocks/block/avatar-6.webp",
    role: "مهندس امنیت",
  },
  {
    name: "محمد گارسیا",
    image:
      "/block-media/shadcnblocks/block/avatar-8.webp",
    role: "دانشمند داده",
  },
  {
    name: "رامین تام",
    image:
      "/block-media/shadcnblocks/block/avatar-8.webp",
    role: "مهندس تضمین کیفیت",
  },
];

interface Team10Props {
  className?: string;
}

const Team10 = ({ className }: Team10Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("bg-muted/50 py-32", className)}>
      <div className="container">
        <div className="max-w-xl text-start">
          <h2 className="mb-5 text-xl md:text-2xll">با متخصصان ما آشنا شوید</h2>
          <p className="mb-12 text-muted-foreground md:text-lg">
            به تیم متخصصان ما بپیوندید و بخشی از شرکتی نوآور باشید که با
            راه‌حل‌های خلاقانه آینده فناوری را می‌سازد.
          </p>
          <Button size="lg">به تیم محصول ما بپیوندید</Button>
        </div>
        <div className="mt-20 grid grid-cols-2 gap-x-4 gap-y-8 md:grid-cols-3 md:gap-8 lg:grid-cols-4">
          {members.map((member) => (
            <div key={member.name} className="flex items-center gap-3 text-start">
              <Avatar className="size-10 border border-border">
                <AvatarImage src={member.image} alt={member.name} />
              </Avatar>
              <div>
                <h3 className="text-sm font-medium">{member.name}</h3>
                <p className="mt-0.5 text-xs text-muted-foreground">
                  {member.role}
                </p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

export { Team10 };