export default function EnumBarChart({ counts }: { counts: Record<string, number> }) {
  const entries = Object.entries(counts).sort(([, countA], [, countB]) => countB - countA);
  const maxCount = Math.max(...entries.map(([, count]) => count), 1);

  return (
    <div className="space-y-1 mt-1">
      {entries.map(([label, count]) => (
        <div key={label} className="flex items-center gap-2 text-xs">
          <span className="w-16 truncate text-warm-500 dark:text-warm-400 text-right shrink-0">
            {label}
          </span>
          <div className="flex-1 h-3 bg-warm-100 dark:bg-navy-700 rounded overflow-hidden">
            <div
              className="h-full bg-teal-500 dark:bg-teal-400 rounded"
              style={{ width: `${(count / maxCount) * 100}%` }}
            />
          </div>
          <span className="w-8 text-warm-500 dark:text-warm-400 text-right shrink-0">{count}</span>
        </div>
      ))}
    </div>
  );
}