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

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

export function StatBox({ icon, label, value, color = 'text-primary-blue' }: StatBoxProps) {
  return (
    <Surface variant="muted" rounded="xl" border padding={4}>
      <Stack direction="row" align="center" gap={3}>
        <Surface variant="muted" rounded="lg" padding={2}>
          <Icon icon={icon} size={5} color={color} />
        </Surface>
        <Box>
          <Text size="2xl" weight="bold" color="text-white" block>{value}</Text>
          <Text size="xs" color="text-gray-500" block>{label}</Text>
        </Box>
      </Stack>
    </Surface>
  );
}