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

interface HorizontalStatCardProps {
  label: string;
  value: string | number;
  icon: LucideIcon;
  iconColor?: string;
  iconBgColor?: string;
}

export function HorizontalStatCard({
  label,
  value,
  icon,
  iconColor = 'text-primary-blue',
  iconBgColor = 'rgba(59, 130, 246, 0.1)',
}: HorizontalStatCardProps) {
  return (
    <Surface variant="muted" rounded="xl" border p={4}>
      <Stack direction="row" align="center" gap={4}>
        <Surface 
          variant="muted" 
          rounded="lg" 
          p={3} 
          backgroundColor={iconBgColor}
        >
          <Icon icon={icon} size={5} color={iconColor} />
        </Surface>
        <Box>
          <Text size="xs" color="text-gray-500" uppercase letterSpacing="wider" block>
            {label}
          </Text>
          <Text size="xl" weight="bold" color="text-white" block>
            {value}
          </Text>
        </Box>
      </Stack>
    </Surface>
  );
}