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

export interface StatGridItemProps {
  label: string;
  value: string | number;
  icon?: React.ReactNode;
  intent?: 'primary' | 'success' | 'warning' | 'critical' | 'high' | 'med' | 'low';
  color?: string; // Alias for intent
}

export const StatGridItem = ({ 
  label, 
  value, 
  icon, 
  intent = 'high',
  color
}: StatGridItemProps) => {
  return (
    <Box padding={4} textAlign="center">
      {icon && (
        <Stack direction="row" align="center" justify="center" gap={2} marginBottom={1}>
          {icon}
        </Stack>
      )}
      <Text size="2xl" weight="bold" variant={intent} color={color} block>
        {value}
      </Text>
      <Text size="xs" weight="medium" variant="low" uppercase letterSpacing="wider">
        {label}
      </Text>
    </Box>
  );
};