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

interface TeamHeroStatsProps {
  teamCount: number;
  recruitingCount: number;
}

export function TeamHeroStats({ teamCount, recruitingCount }: TeamHeroStatsProps) {
  return (
    <Stack direction="row" align="center" gap={4}>
      <Stack 
        display="flex" 
        alignItems="center" 
        gap={2} 
        px={3} 
        py={2} 
        rounded="lg" 
        bg="bg-iron-gray/50" 
        border={true} 
        borderColor="border-charcoal-outline"
      >
        <Icon icon={Users} size={4} color="text-purple-400" />
        <Text weight="semibold" color="text-white">{teamCount}</Text>
        <Text size="sm" color="text-gray-500">Teams</Text>
      </Stack>
      <Stack 
        display="flex" 
        alignItems="center" 
        gap={2} 
        px={3} 
        py={2} 
        rounded="lg" 
        bg="bg-iron-gray/50" 
        border={true} 
        borderColor="border-charcoal-outline"
      >
        <Icon icon={UserPlus} size={4} color="text-performance-green" />
        <Text weight="semibold" color="text-white">{recruitingCount}</Text>
        <Text size="sm" color="text-gray-500">Recruiting</Text>
      </Stack>
    </Stack>
  );
}