interface MilestoneData {
  skillCode: string
  reachedAt: string
}

const skillLabels: Record<string, string> = {
  "vocal-a": "Letra A",
  "vocal-e": "Letra E",
  "vocal-i": "Letra I",
  "vocal-o": "Letra O",
  "vocal-u": "Letra U",
  "numero-1": "Número 1",
  "numero-2": "Número 2",
  "numero-3": "Número 3",
  "numero-4": "Número 4",
  "numero-5": "Número 5",
}

export function MilestonesList({ data }: { data: MilestoneData[] }) {
  if (!data || data.length === 0) {
    return (
      <div className="text-center text-muted-foreground italic py-4">
        Todavía no hay logros
      </div>
    )
  }

  return (
    <div className="flex flex-wrap gap-2">
      {data.map((m) => (
        <div
          key={m.skillCode}
          className="bg-primary/10 border border-primary/20 rounded-xl px-3 py-2 text-sm font-display font-medium"
        >
          {skillLabels[m.skillCode] || m.skillCode}
        </div>
      ))}
    </div>
  )
}