'use client'

export interface CharOption {
  name: string
  classCss?: string // clase CSS de color por clase (priest, warrior…)
}

/**
 * Selector de personaje con las opciones coloreadas por clase (como el diseño
 * original: `class="priest big-font"`). El propio <select> toma el color de la
 * clase del personaje seleccionado. Se usa en todas las herramientas que piden
 * elegir un personaje.
 */
export function CharacterSelect({
  characters,
  value,
  onChange,
  placeholder,
  name,
  required = true,
  className,
}: {
  characters: CharOption[]
  value: string
  onChange: (value: string) => void
  placeholder: string
  name?: string
  required?: boolean
  className?: string
}) {
  const selectedCss = characters.find((c) => c.name === value)?.classCss
  const selectClass = [className, selectedCss].filter(Boolean).join(' ') || undefined

  return (
    <select name={name} className={selectClass} value={value} onChange={(e) => onChange(e.target.value)} required={required}>
      <option value="" disabled>
        {placeholder}
      </option>
      {characters.map((c) => (
        <option key={c.name} value={c.name} className={c.classCss ? `${c.classCss} big-font` : undefined}>
          {c.name}
        </option>
      ))}
    </select>
  )
}