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

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

export const StatGridItem = ({ 
  label, 
  value, 
  icon, 
  intent = 'high',
  color
}: StatGridItemProps) => {
  const isLucideIcon = typeof icon === 'function' || (typeof icon === 'object' && icon !== null && 'render' in icon);

  return (
    <Box padding={4} textAlign="center">
      {icon && (
        <Stack direction="row" align="center" justify="center" gap={2} marginBottom={1}>
          {isLucideIcon ? (
            <Icon icon={icon as LucideIcon} size={4} intent={intent} />
          ) : (
            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>
  );
};