import { Delete } from 'lucide-react';
import type { LetterState } from '../types';

type KeyboardProps = {
  letterStates: Map<string, LetterState>;
  onKey: (key: string) => void;
  hidden: boolean;
};

const rows = ['qwertyuiop', 'asdfghjkl', 'zxcvbnm'];

const keyClasses: Record<LetterState, string> = {
  correct: 'bg-emerald-500 text-slate-950',
  present: 'bg-amber-400 text-slate-950',
  absent: 'bg-slate-800 text-slate-300',
  empty: 'bg-slate-700/90 text-slate-100 hover:bg-slate-600',
};

export function Keyboard({ letterStates, onKey, hidden }: KeyboardProps) {
  if (hidden) {
    return (
      <div className="rounded-lg border border-rose-500/30 bg-rose-950/30 px-4 py-4 text-center text-sm font-semibold text-rose-100">
        Keyboard feedback is hidden.
      </div>
    );
  }

  return (
    <div className="mx-auto flex w-full max-w-3xl flex-col gap-2">
      {rows.map((row, rowIndex) => (
        <div className="flex justify-center gap-1.5" key={row}>
          {rowIndex === 2 && (
            <button
              className="min-h-11 rounded-md bg-slate-700 px-3 text-xs font-bold uppercase text-slate-100 hover:bg-slate-600"
              onClick={() => onKey('Enter')}
              type="button"
            >
              Enter
            </button>
          )}
          {row.split('').map((letter) => (
            <button
              className={`min-h-11 min-w-0 flex-1 rounded-md px-1 text-sm font-black uppercase transition-colors sm:text-base ${
                keyClasses[letterStates.get(letter) ?? 'empty']
              }`}
              key={letter}
              onClick={() => onKey(letter)}
              type="button"
            >
              {letter}
            </button>
          ))}
          {rowIndex === 2 && (
            <button
              aria-label="Delete"
              className="grid min-h-11 place-items-center rounded-md bg-slate-700 px-3 text-slate-100 hover:bg-slate-600"
              onClick={() => onKey('Backspace')}
              type="button"
            >
              <Delete size={18} />
            </button>
          )}
        </div>
      ))}
    </div>
  );
}
