import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'

const adminTeam = [
  { name: 'Chris Chrome', ext: '1000', image: '/chris.webp', discord: '@chrischrome' },
  { name: 'Cayden', ext: '1001', image: '/cayden.webp', discord: '@freepbx' },
  { name: 'Nick', ext: '1036', image: '/nick.webp', discord: '@gamewell' },
  { name: 'Faux_Lemons', ext: '1011', image: '/faux_lemons.webp', discord: '@faux_lemons' },
]

const modTeam = [
  { name: 'ashton', ext: '1007', image: '/ashton.webp', discord: '@ashtoncarlson' },
  { name: 'Maddix', ext: '1019', image: '/maddix.webp', discord: '@maddix6859' },
  { name: 'rocord', ext: '2222', image: '/rocord.webp', discord: '@rocord01' },
]

function TeamMember({ name, ext, image, discord }) {
  return (
    (<Card className="bg-gray-950 text-white">
      <CardHeader className="flex flex-row items-center gap-4 space-y-0">
        <Avatar className="h-14 w-14">
          <AvatarImage src={image} alt={name} />
          <AvatarFallback>{name[0]}</AvatarFallback>
        </Avatar>
        <div>
          <CardTitle>{name}</CardTitle>
          <div className="text-sm text-gray-400">{discord}</div>
        </div>
      </CardHeader>
      <CardContent>
        <div className="text-sm text-gray-300">x{ext}</div>
      </CardContent>
    </Card>)
  );
}

export default function Team() {
  return (
    (<section id="team" className="container py-24">
      <h2 className="mb-12 text-center text-3xl font-bold text-white">Our Team</h2>
      <div className="space-y-12">
        <div>
          <h3 className="mb-4 text-2xl font-semibold text-gray-200">Administration Team</h3>
          <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
            {adminTeam.map((member) => (
              <TeamMember key={member.ext} {...member} />
            ))}
          </div>
        </div>
        <div>
          <h3 className="mb-4 text-2xl font-semibold text-gray-200">Moderation Team</h3>
          <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
            {modTeam.map((member) => (
              <TeamMember key={member.ext} {...member} />
            ))}
          </div>
        </div>
      </div>
    </section>)
  );
}