/**
 * Clavier de caractères spéciaux français pour la zone de saisie.
 *
 * Affiche une rangée horizontale scrollable de 30 caractères accentués
 * (15 minuscules + 15 majuscules). Un clic insère le caractère à la
 * position du curseur via le callback `onInsert`.
 *
 * Règle H : purement présentationnel, la logique d'insertion est dans le parent.
 * Règle L : tokens Direction H exclusivement.
 *
 * `onMouseDown preventDefault` empêche le textarea de perdre le focus au clic,
 * ce qui permet de conserver la position du curseur lors de l'insertion.
 */

const SPECIAL_CHARS = [
  'à',
  'â',
  'é',
  'è',
  'ê',
  'ë',
  'î',
  'ï',
  'ô',
  'ù',
  'û',
  'ü',
  'ç',
  'œ',
  'æ',
  'À',
  'Â',
  'É',
  'È',
  'Ê',
  'Ë',
  'Î',
  'Ï',
  'Ô',
  'Ù',
  'Û',
  'Ü',
  'Ç',
  'Œ',
  'Æ',
] as const

interface Props {
  onInsert: (char: string) => void
  disabled?: boolean
}

export function SpecialCharsKeyboard({ onInsert, disabled = false }: Props) {
  return (
    <div
      role="toolbar"
      aria-label="Caractères spéciaux"
      className="flex flex-wrap gap-1.5 rounded-md border border-border bg-surface p-2"
    >
      {SPECIAL_CHARS.map((char) => (
        <button
          key={char}
          type="button"
          disabled={disabled}
          onMouseDown={(e) => e.preventDefault()}
          onClick={() => onInsert(char)}
          aria-label={`Insérer le caractère ${char}`}
          className="size-8 shrink-0 rounded-md border border-border bg-surface text-sm font-medium text-ink-primary transition-colors hover:border-brand hover:bg-brand-soft hover:text-brand-text focus:border-brand focus:outline-none focus:shadow-focus disabled:cursor-not-allowed disabled:opacity-50"
        >
          {char}
        </button>
      ))}
    </div>
  )
}