import React from 'react';
import { Box } from './Box';
import { Text } from './Text';

interface MiniStatProps {
  label: string;
  value: string | number;
  color?: string;
}

export function MiniStat({ label, value, color = 'text-white' }: MiniStatProps) {
  return (
    <Box textAlign="center" p={2} rounded="lg" bg="bg-charcoal-outline/30">
      <Text size="lg" weight="bold" color={color} block>{value}</Text>
      <Text size="xs" color="text-gray-500" block style={{ fontSize: '10px' }}>{label}</Text>
    </Box>
  );
}