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

export interface CategoryDistributionCardProps {
  label: string;
  count: number;
  total: number;
  icon: LucideIcon;
  intent?: 'primary' | 'success' | 'warning' | 'critical' | 'telemetry';
}

export const CategoryDistributionCard = ({ 
  label, 
  count, 
  total, 
  icon, 
  intent = 'primary' 
}: CategoryDistributionCardProps) => {
  const percentage = total > 0 ? (count / total) * 100 : 0;

  const intentColorMap = {
    primary: 'var(--ui-color-intent-primary)',
    success: 'var(--ui-color-intent-success)',
    warning: 'var(--ui-color-intent-warning)',
    critical: 'var(--ui-color-intent-critical)',
    telemetry: 'var(--ui-color-intent-telemetry)',
  };

  return (
    <Surface variant="muted" rounded="xl" padding={4} style={{ border: '1px solid var(--ui-color-border-default)' }}>
      <Box display="flex" alignItems="center" justifyContent="between" marginBottom={3}>
        <Text size="2xl" weight="bold" variant="high">{count}</Text>
        <Box padding={2} rounded="lg" bg="var(--ui-color-bg-surface-muted)">
          <Icon icon={icon} size={5} intent={intent} />
        </Box>
      </Box>
      
      <Text size="sm" weight="medium" variant="high" block marginBottom={1}>
        {label}
      </Text>
      
      <Box fullWidth height="0.375rem" bg="var(--ui-color-bg-surface-muted)" style={{ borderRadius: '9999px', overflow: 'hidden' }}>
        <Box 
          fullHeight 
          bg={intentColorMap[intent]} 
          style={{ width: `${percentage}%` }} 
        />
      </Box>
      
      <Text size="xs" variant="low" marginTop={2}>
        {Math.round(percentage)}% of total
      </Text>
    </Surface>
  );
};