import { Box } from '@/ui/Box';
import { ProgressBar } from '@/ui/ProgressBar';
import { Stack } from '@/ui/Stack';
import { Text } from '@/ui/Text';

interface RatingComponentProps {
  label: string;
  value: number;
  maxValue: number;
  color: string;
  suffix?: string;
  description: string;
  breakdown: { label: string; percentage: number }[];
}

export function RatingComponent({
  label,
  value,
  maxValue,
  color,
  suffix = '',
  description,
  breakdown,
}: RatingComponentProps) {
  const percentage = (value / maxValue) * 100;

  return (
    <Box>
      <Box display="flex" alignItems="center" justifyContent="between" mb={2}>
        <Text weight="medium" color="text-white">{label}</Text>
        <Text size="2xl" weight="bold" color={color}>
          {value}{suffix}
        </Text>
      </Box>
      
      <ProgressBar value={percentage} max={100} color={color} mb={3} />

      <Text size="xs" color="text-gray-400" block mb={3}>{description}</Text>

      <Stack gap={1}>
        {breakdown.map((item, index) => (
          <Box key={index} display="flex" alignItems="center" justifyContent="between">
            <Text size="xs" color="text-gray-500">{item.label}</Text>
            <Text size="xs" color="text-gray-400">{item.percentage}%</Text>
          </Box>
        ))}
      </Stack>
    </Box>
  );
}