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

interface CategoryDistributionCardProps {
  label: string;
  count: number;
  percentage: number;
  icon: LucideIcon;
  color: string;
  bgColor: string;
  borderColor: string;
}

export function CategoryDistributionCard({
  label,
  count,
  percentage,
  icon,
  color,
  bgColor,
  borderColor,
}: CategoryDistributionCardProps) {
  return (
    <Box p={4} rounded="xl" bg={bgColor} border borderColor={borderColor}>
      <Box display="flex" alignItems="center" justifyContent="between" mb={3}>
        <Text size="2xl" weight="bold" color={color}>{count}</Text>
        <Box p={2} rounded="lg" bg="bg-white/5">
          <Icon icon={icon} size={5} color={color} />
        </Box>
      </Box>
      <Text size="sm" weight="medium" color="text-white" block mb={1}>
        {label}
      </Text>
      <Box w="full" h="1.5" bg="bg-white/5" rounded="full" overflow="hidden">
        <Box
          h="full"
          bg={color.replace('text-', 'bg-')}
          style={{ width: `${percentage}%` }}
        />
      </Box>
      <Text size="xs" color="text-gray-500" mt={2}>
        {percentage.toFixed(1)}% of total
      </Text>
    </Box>
  );
}