import React from 'react';
import { Box } from './Box';
import { Text } from './Text';
import { ProgressBar } from './ProgressBar';

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

export function CategoryDistributionCard({
  label,
  count,
  percentage,
  color,
  bgColor,
  borderColor,
  progressColor,
}: CategoryDistributionCardProps) {
  return (
    <Box p={4} rounded="xl" className={`${bgColor} border ${borderColor}`}>
      <Box display="flex" alignItems="center" justifyContent="between" mb={3}>
        <Text size="2xl" weight="bold" className={color}>{count}</Text>
      </Box>
      <Text color="text-white" weight="medium" block mb={1}>{label}</Text>
      <ProgressBar value={percentage} max={100} color={progressColor} bg="bg-deep-graphite/50" />
      <Text size="xs" color="text-gray-500" block mt={1}>{percentage}% of drivers</Text>
    </Box>
  );
}