"use client"

const errorLabels: Record<string, string> = {
  "discriminacion-auditiva": "Discriminación auditiva",
  "confusion-letra": "Confusión de letra",
  "silaba-dificil": "Sílaba difícil",
  "omision-letra": "Omisión de letra",
  "inversion-letra": "Inversión de letra",
}

const errorColors: Record<string, string> = {
  "discriminacion-auditiva": "bg-blue-200 text-blue-800",
  "confusion-letra": "bg-red-200 text-red-800",
  "silaba-dificil": "bg-yellow-200 text-yellow-800",
  "omision-letra": "bg-purple-200 text-purple-800",
  "inversion-letra": "bg-orange-200 text-orange-800",
}

interface Props {
  data: Record<string, number>
  total: number
}

export default function ErrorPatternsChart({ data, total }: Props) {
  const entries = Object.entries(data)

  if (total === 0) {
    return (
      <p className="text-sm text-muted-foreground text-center py-4">
        Sin errores registrados. ¡Bien ahí!
      </p>
    )
  }

  return (
    <div className="space-y-2">
      {entries.map(([key, count]) => {
        const pct = Math.round((count / total) * 100)
        return (
          <div key={key}>
            <div className="flex justify-between text-sm mb-1">
              <span className="font-medium">{errorLabels[key] || key}</span>
              <span className="text-muted-foreground">
                {count} ({pct}%)
              </span>
            </div>
            <div className="h-2 bg-gray-100 rounded-full overflow-hidden">
              <div
                className={`h-full rounded-full transition-all ${
                  key === "discriminacion-auditiva"
                    ? "bg-blue-400"
                    : key === "confusion-letra"
                      ? "bg-red-400"
                      : key === "silaba-dificil"
                        ? "bg-yellow-400"
                        : key === "omision-letra"
                          ? "bg-purple-400"
                          : "bg-orange-400"
                }`}
                style={{ width: `${pct}%` }}
              />
            </div>
          </div>
        )
      })}
    </div>
  )
}