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

export interface HorizontalStatCardProps {
  label: string;
  value: string | number;
  icon: LucideIcon | React.ReactNode;
  intent?: 'primary' | 'success' | 'warning' | 'critical' | 'telemetry';
  subValue?: string;
  iconBgColor?: string;
}

export const HorizontalStatCard = ({ 
  label, 
  value, 
  icon, 
  intent = 'primary',
  subValue,
  iconBgColor
}: HorizontalStatCardProps) => {
  const isLucideIcon = typeof icon === 'function' || (typeof icon === 'object' && icon !== null && 'render' in icon);

  return (
    <Card variant="default">
      <Box display="flex" alignItems="center" gap={4}>
        <Box padding={3} rounded="lg" bg={iconBgColor || "var(--ui-color-bg-surface-muted)"}>
          {isLucideIcon ? (
            <Icon icon={icon as LucideIcon} size={5} intent={intent} />
          ) : (
            icon
          )}
        </Box>
        <Box>
          <Text size="xs" weight="bold" variant="low" uppercase>
            {label}
          </Text>
          <Text size="xl" weight="bold" variant="high" block marginTop={0.5}>
            {value}
          </Text>
          {subValue && (
            <Text size="xs" variant="low" block marginTop={0.5}>
              {subValue}
            </Text>
          )}
        </Box>
      </Box>
    </Card>
  );
};