Team #3

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"
import { Button } from "@/components/ui/button"

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

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

export default function Team3({ 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-6">
          {members.map((member) => (
            <Card key={member.name} className="group relative overflow-hidden">
              <CardContent className="p-6">
                <div className="flex flex-col gap-6 md:flex-row md:items-center">
                  <Avatar className="size-20 shrink-0">
                    {member.avatar && (
                      <AvatarImage
                        src={member.avatar.src}
                        alt={member.avatar.alt}
                      />
                    )}
                  </Avatar>
                  <div className="flex-1 space-y-2">
                    <div>
                      <h3 className="text-xl font-semibold">{member.name}</h3>
                      <p className="text-sm text-muted-foreground">
                        {member.role}
                      </p>
                    </div>
                    <div className="flex flex-wrap gap-2">
                      {member.skills.map((skill) => (
                        <Badge
                          key={skill}
                          variant="secondary"
                          className="text-xs"
                        >
                          {skill}
                        </Badge>
                      ))}
                    </div>
                  </div>
                  <div className="flex gap-4 md:ml-auto">
                    {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"
                      >
                        <Button size="icon" variant="secondary">
                          {link.icon}
                        </Button>
                      </a>
                    ))}
                  </div>
                </div>
              </CardContent>
            </Card>
          ))}
        </div>
      </div>
    </section>
  )
}