interface Contributor {
  name: string;
  email: string;
  commits: number;
  linesAdded: number;
  linesDeleted: number;
}

interface ContributorChartProps {
  contributors: Contributor[];
  title?: string;
  className?: string;
}

export function ContributorChart({ contributors, title, className }: ContributorChartProps) {
  const maxValue = Math.max(...contributors.map((c) => c.commits), 1);
  const barColors = [
    '#0ea5e9',
    '#f97316',
    '#8b5cf6',
    '#10b981',
    '#6366f1',
    '#ec4899',
    '#14b8a6',
    '#f59e0b',
    '#64748b',
  ];

  const sorted = [...contributors].sort((a, b) => b.commits - a.commits).slice(0, 10);

  return (
    <div className={className}>
      <h4 className="text-sm font-semibold mb-4">{title || "Top Contributeurs"}</h4>
      {sorted.map((contributor, index) => {
        const percentage = (contributor.commits / maxValue) * 100;
        const color = barColors[index % barColors.length];

        return (
          <div key={index} className="mb-3">
            <div className="flex justify-between items-center mb-1">
              <div className="flex items-center gap-2">
                <div
                  className="w-2 h-2 rounded-full"
                  style={{ backgroundColor: color }}
                />
                <span className="text-xs font-medium">{contributor.name}</span>
              </div>
              <span className="text-xs text-muted-foreground">
                {contributor.commits} commits
              </span>
            </div>
            <div className="w-full bg-muted h-2 rounded-full overflow-hidden">
              <div
                className="h-full rounded-full transition-all duration-300"
                style={{
                  width: `${percentage}%`,
                  backgroundColor: color,
                }}
              />
            </div>
          </div>
        );
      })}
      {sorted.length === 0 && (
        <p className="text-sm text-muted-foreground text-center py-4">
          Aucune donnée de contributeur
        </p>
      )}
    </div>
  );
}

// Add TypeScript types for props
export interface ContributorData {
  name: string;
  email: string;
  commits: number;
  linesAdded: number;
  linesDeleted: number;
}
