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

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

export function TeamHeroStats({ teamCount, recruitingCount }: TeamHeroStatsProps) {
  return (
    <Stack direction="row" align="center" gap={4}>
      <Box 
        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>
      </Box>
      <Box 
        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>
      </Box>
    </Stack>
  );
}