import type { Difficulty, Settings } from '../types';

type SettingsPanelProps = {
  settings: Settings;
  onChange: (settings: Settings) => void;
};

const difficulties: Array<{ value: Difficulty; label: string }> = [
  { value: 'wicked', label: 'Wicked' },
  { value: 'vicious', label: 'Vicious' },
  { value: 'nightmare', label: 'Nightmare' },
];

export function SettingsPanel({ settings, onChange }: SettingsPanelProps) {
  return (
    <div className="rounded-lg border border-slate-800 bg-slate-950/70 p-4">
      <div className="flex items-center justify-between gap-3">
        <h2 className="text-sm font-black uppercase tracking-[0.2em] text-slate-300">Settings</h2>
      </div>

      <div className="mt-4 space-y-4">
        <div>
          <label className="text-xs font-bold uppercase text-slate-500" htmlFor="word-length">
            Word length
          </label>
          <div className="mt-2 grid grid-cols-4 gap-2" id="word-length">
            {[4, 5, 6, 7].map((length) => (
              <button
                className={`rounded-md border px-3 py-2 text-sm font-black ${
                  settings.wordLength === length
                    ? 'border-rose-400 bg-rose-500/20 text-rose-100'
                    : 'border-slate-800 bg-slate-900 text-slate-300 hover:border-slate-600'
                }`}
                key={length}
                onClick={() => onChange({ ...settings, wordLength: length as Settings['wordLength'] })}
                type="button"
              >
                {length}
              </button>
            ))}
          </div>
        </div>

        <div>
          <label className="text-xs font-bold uppercase text-slate-500" htmlFor="difficulty">
            Difficulty
          </label>
          <select
            className="mt-2 w-full rounded-md border border-slate-800 bg-slate-900 px-3 py-2 text-sm font-semibold text-slate-100 outline-none focus:border-rose-400"
            id="difficulty"
            onChange={(event) => onChange({ ...settings, difficulty: event.target.value as Difficulty })}
            value={settings.difficulty}
          >
            {difficulties.map((difficulty) => (
              <option key={difficulty.value} value={difficulty.value}>
                {difficulty.label}
              </option>
            ))}
          </select>
        </div>
      </div>
    </div>
  );
}