import React from 'react';
import { LucideIcon } from 'lucide-react';
import { Box } from './Box';
import { Text } from './Text';
import { Icon } from './Icon';
import { Stack } from './Stack';

interface StatGridItemProps {
  label: string;
  value: string | number;
  color?: string;
  icon?: LucideIcon;
}

export function StatGridItem({ label, value, color = 'text-white', icon }: StatGridItemProps) {
  return (
    <Box 
      p={4} 
      bg="bg-deep-graphite/60" 
      rounded="xl" 
      border={true} 
      borderColor="border-charcoal-outline" 
      textAlign="center"
    >
      {icon && (
        <Stack direction="row" align="center" justify="center" gap={2} mb={1} className={color}>
          <Icon icon={icon} size={4} />
          <Text size="xs" weight="medium" uppercase letterSpacing="0.05em">{label}</Text>
        </Stack>
      )}
      {!icon && (
        <Text size="xs" color="text-gray-500" uppercase letterSpacing="0.05em" block mb={1}>{label}</Text>
      )}
      <Text size="3xl" weight="bold" color={color} block>{value}</Text>
    </Box>
  );
}