import { Instagram, Linkedin, Twitter, Users } from "lucide-react";

import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card";
import { cn } from "@/lib/utils";

interface TeamMember {
  id: string;
  name: string;
  role: string;
  avatar: string;
  social: {
    twitter?: string;
    instagram?: string;
    linkedin?: string;
  };
}

interface Team15Props {
  label: string;
  title1: string;
  title2: string;
  subtitle: string;
  members: TeamMember[];
  className?: string;
}

const Team15 = ({
  className,
  label = "با خالقان ما آشنا شوید",
  title1 = "آینده را می‌سازیم",
  title2 = "با هم",
  subtitle = "تیم متنوع ما از نوآوران، طراحان و مهندسان با هم کار می‌کنند تا تجربه‌های دیجیتال استثنایی بسازند که تفاوت ایجاد کند.",
  members = [
    {
      id: "maryam-hosseini",
      name: "مریم حسینی",
      role: "مدیر خلاقیت",
      avatar:
        "/block-media/shadcnblocks/block/avatar/avatar6.jpg",
      social: {
        twitter: "#",
        instagram: "#",
        linkedin: "#",
      },
    },
    {
      id: "amir-rezaei",
      name: "امیر رضایی",
      role: "توسعه‌دهنده ارشد",
      avatar:
        "/block-media/shadcnblocks/block/avatar/avatar3.webp",
      social: {
        twitter: "#",
        instagram: "#",
        linkedin: "#",
      },
    },
    {
      id: "sara-petrov",
      name: "سارا پتریا",
      role: "طراح محصول",
      avatar:
        "/block-media/shadcnblocks/block/avatar/avatar8.jpg",
      social: {
        twitter: "#",
        instagram: "#",
        linkedin: "#",
      },
    },
    {
      id: "ali-mohammadi",
      name: "علی محمدی",
      role: "مدیر محصول",
      avatar:
        "/block-media/shadcnblocks/block/avatar/avatar3.jpg",
      social: {
        twitter: "#",
        instagram: "#",
        linkedin: "#",
      },
    },
    {
      id: "nazanin-singh",
      name: "نازنین سینگ",
      role: "مدیر بازاریابی",
      avatar:
        "/block-media/shadcnblocks/block/avatar/avatar8.webp",
      social: {
        twitter: "#",
        instagram: "#",
        linkedin: "#",
      },
    },
    {
      id: "pouya-jafari",
      name: "پویا جعفری",
      role: "دانشمند داده",
      avatar:
        "/block-media/shadcnblocks/block/avatar/avatar5.webp",
      social: {
        twitter: "#",
        instagram: "#",
        linkedin: "#",
      },
    },
  ],
}: Team15Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("bg-background py-24", className)}>
      <div className="container mx-auto px-4">
        <div className="mb-16 text-center">
          <div className="mb-4 flex items-center justify-center gap-2">
            <Users className="h-4 w-4 text-foreground" />
            <p className="text-sm font-medium tracking-wider text-muted-foreground">
              {label}
            </p>
          </div>

          <h2 className="mb-4 text-xl md:text-2xll lg:text-2xll">
            <span className="font-semibold text-foreground">{title1}</span>{" "}
            <span className="font-medium text-muted-foreground italic">
              {title2}
            </span>
          </h2>

          <p className="mx-auto max-w-2xl text-muted-foreground">{subtitle}</p>
        </div>

        <div className="mx-auto grid max-w-6xl grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3">
          {members.map((member) => (
            <Card
              key={member.id}
              className="border-border/50 bg-card/50 p-6 backdrop-blur-sm"
            >
              <div className="grid grid-cols-2 items-start gap-4">
                <div className="flex flex-col justify-between gap-6 text-start">
                  <div>
                    <h3 className="font-medium text-foreground">
                      {member.name}
                    </h3>
                    <p className="text-xs text-muted-foreground">
                      {member.role}
                    </p>
                  </div>

                  <div className="flex gap-2">
                    {member.social.twitter && (
                      <Button
                        size="sm"
                        variant="outline"
                        className="h-8 w-8 rounded-md border-border/50 bg-background/50 p-0 transition-all duration-200"
                        aria-label={`توییتر ${member.name}`}
                      >
                        <Twitter className="h-3 w-3" />
                      </Button>
                    )}
                    {member.social.instagram && (
                      <Button
                        size="sm"
                        variant="outline"
                        className="h-8 w-8 rounded-md border-border/50 bg-background/50 p-0 transition-all duration-200"
                        aria-label={`اینستاگرام ${member.name}`}
                      >
                        <Instagram className="h-3 w-3" />
                      </Button>
                    )}
                    {member.social.linkedin && (
                      <Button
                        size="sm"
                        variant="outline"
                        className="h-8 w-8 rounded-md border-border/50 bg-background/50 p-0 transition-all duration-200"
                        aria-label={`لینکدین ${member.name}`}
                      >
                        <Linkedin className="h-3 w-3" />
                      </Button>
                    )}
                  </div>
                </div>

                <div>
                  <div className="h-full">
                    <img
                      src={member.avatar}
                      alt={member.name}
                      className="h-full w-full rounded-lg object-cover"
                    />
                  </div>
                </div>
              </div>
            </Card>
          ))}
        </div>
      </div>
    </section>
  );
};

export { Team15 };