import React from 'react';

interface FinishDistributionProps {
  wins: number;
  podiums: number;
  topTen: number;
  total: number;
}

export default function FinishDistributionChart({ wins, podiums, topTen, total }: FinishDistributionProps) {
  const outsideTopTen = total - topTen;
  const podiumsNotWins = podiums - wins;
  const topTenNotPodium = topTen - podiums;

  const segments = [
    { label: 'Wins', value: wins, color: 'bg-performance-green', textColor: 'text-performance-green' },
    { label: 'Podiums', value: podiumsNotWins, color: 'bg-warning-amber', textColor: 'text-warning-amber' },
    { label: 'Top 10', value: topTenNotPodium, color: 'bg-primary-blue', textColor: 'text-primary-blue' },
    { label: 'Other', value: outsideTopTen, color: 'bg-gray-600', textColor: 'text-gray-400' },
  ].filter(s => s.value > 0);

  return (
    <div className="space-y-3">
      <div className="h-4 rounded-full overflow-hidden flex bg-charcoal-outline">
        {segments.map((segment, index) => (
          <div
            key={segment.label}
            className={`${segment.color} transition-all duration-500`}
            style={{ width: `${(segment.value / total) * 100}%` }}
          />
        ))}
      </div>
      <div className="flex flex-wrap gap-4 justify-center">
        {segments.map((segment) => (
          <div key={segment.label} className="flex items-center gap-2">
            <div className={`w-3 h-3 rounded-full ${segment.color}`} />
            <span className={`text-xs ${segment.textColor}`}>
              {segment.label}: {segment.value} ({((segment.value / total) * 100).toFixed(0)}%)
            </span>
          </div>
        ))}
      </div>
    </div>
  );
}