Team #4

import { Card, CardContent } from "@/components/ui/card"
import { Avatar, AvatarImage } from "@/components/ui/avatar"
import { Badge } from "@/components/ui/badge"
import type { ImageType, IconType } from "@/types"

interface TeamMember {
  name: string
  role: string
  avatar: ImageType
  achievements: {
    value: string
    label: string
  }[]
  social: {
    icon: IconType
    href: string
  }[]
}

interface Props {
  badge: string
  title: string
  description: string
  members: TeamMember[]
}

export default function Team4({ badge, title, description, members }: Props) {
  return (
    <section className="py-12 md:py-20">
      <div className="mx-auto max-w-4xl px-6">
        <div className="mx-auto max-w-2xl text-center">
          {badge && <Badge className="mb-4">{badge}</Badge>}
          <h2 className="text-4xl font-medium lg:text-5xl">{title}</h2>
          <p className="mt-4 text-muted-foreground">{description}</p>
        </div>
        <div className="mt-16 grid gap-8 sm:grid-cols-2 lg:grid-cols-3">
          {members.map((member) => (
            <Card key={member.name} className="group relative overflow-hidden">
              <CardContent className="p-6">
                <div className="flex flex-col items-center text-center">
                  <Avatar className="size-24 border-2 border-primary/10 rounded-full">
                    {member.avatar && (
                      <AvatarImage
                        src={member.avatar.src}
                        alt={member.avatar.alt}
                      />
                    )}
                  </Avatar>
                  <h3 className="mt-4 text-xl font-semibold">{member.name}</h3>
                  <p className="text-sm text-muted-foreground">{member.role}</p>
                  <div className="mt-6 flex gap-6">
                    {member.social.map((link) => (
                      <a
                        key={link.href}
                        href={link.href}
                        className="text-muted-foreground transition-colors hover:text-primary"
                        target="_blank"
                        rel="noopener noreferrer"
                      >
                        {link.icon}
                      </a>
                    ))}
                  </div>
                  <div className="mt-6 grid w-full grid-cols-2 gap-4 border-t pt-6">
                    {member.achievements.map((achievement) => (
                      <div key={achievement.label} className="space-y-1">
                        <p className="text-xl font-bold text-primary">
                          {achievement.value}
                        </p>
                        <p className="text-xs text-muted-foreground">
                          {achievement.label}
                        </p>
                      </div>
                    ))}
                  </div>
                </div>
              </CardContent>
            </Card>
          ))}
        </div>
      </div>
    </section>
  )
}