import { Badge } from '@/ui/Badge';
import { Icon } from '@/ui/Icon';
import { Image } from '@/ui/Image';
import { Stack } from '@/ui/Stack';
import { Text } from '@/ui/Text';
import { Trophy, Users } from 'lucide-react';

interface RecruitingTeamCardProps {
  name: string;
  description?: string;
  logoUrl: string;
  category?: string;
  memberCount: number;
  totalWins: number;
  onClick: () => void;
}

export function RecruitingTeamCard({
  name,
  description,
  logoUrl,
  category,
  memberCount,
  totalWins,
  onClick,
}: RecruitingTeamCardProps) {
  return (
    <Stack
      as="button"
      type="button"
      onClick={onClick}
      p={4}
      rounded="xl"
      bg="bg-iron-gray/60"
      border={true}
      borderColor="border-charcoal-outline"
      className="hover:border-performance-green/40 transition-all duration-200 text-left group"
    >
      <Stack display="flex" alignItems="start" justifyContent="between" mb={3}>
        <Stack width="8" height="8" rounded="lg" bg="bg-charcoal-outline" border={true} borderColor="border-charcoal-outline" overflow="hidden">
          <Image
            src={logoUrl}
            alt={name}
            width={32}
            height={32}
            objectFit="cover"
          />
        </Stack>
        <Badge variant="success">
          <Stack w="1.5" h="1.5" rounded="full" bg="bg-performance-green" animate="pulse" mr={1} />
          Recruiting
        </Badge>
      </Stack>

      <Text color="text-white" weight="semibold" block mb={1} className="group-hover:text-performance-green transition-colors line-clamp-1">
        {name}
      </Text>
      <Text size="xs" color="text-gray-500" block mb={3} className="line-clamp-2">{description}</Text>

      <Stack direction="row" align="center" gap={2} wrap>
        {category && (
          <Stack direction="row" align="center" gap={1}>
            <Stack w="1.5" h="1.5" rounded="full" bg="bg-purple-400" />
            <Text size="xs" color="text-purple-400">{category}</Text>
          </Stack>
        )}
        <Stack direction="row" align="center" gap={1}>
          <Icon icon={Users} size={3} color="text-gray-400" />
          <Text size="xs" color="text-gray-400">{memberCount}</Text>
        </Stack>
        <Stack direction="row" align="center" gap={1}>
          <Icon icon={Trophy} size={3} color="text-gray-400" />
          <Text size="xs" color="text-gray-400">{totalWins} wins</Text>
        </Stack>
      </Stack>
    </Stack>
  );
}