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

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

/**
 * StatGridItem
 * 
 * A simple stat display for use in a grid.
 */
export function StatGridItem({ label, value, icon, color = 'text-primary-blue' }: StatGridItemProps) {
  return (
    <Box p={4} textAlign="center">
      {icon && (
        <Stack direction="row" align="center" justify="center" gap={2} mb={1} color={color}>
          <Icon icon={icon} size={4} />
        </Stack>
      )}
      <Text size="2xl" weight="bold" color="text-white" block>
        {value}
      </Text>
      <Text size="xs" weight="medium" color="text-gray-500" uppercase letterSpacing="wider">
        {label}
      </Text>
    </Box>
  );
}