'use client';

interface HorizontalBarChartProps {
  data: { label: string; value: number; color: string }[];
  maxValue: number;
}

export function HorizontalBarChart({ data, maxValue }: HorizontalBarChartProps) {
  return (
    <div className="space-y-3">
      {data.map((item) => (
        <div key={item.label}>
          <div className="flex justify-between text-sm mb-1">
            <span className="text-gray-400">{item.label}</span>
            <span className="text-white font-medium">{item.value}</span>
          </div>
          <div className="h-2 bg-charcoal-outline rounded-full overflow-hidden">
            <div
              className={`h-full rounded-full ${item.color} transition-all duration-500 ease-out`}
              style={{ width: `${Math.min((item.value / maxValue) * 100, 100)}%` }}
            />
          </div>
        </div>
      ))}
    </div>
  );
}