import { Flame, Infinity as InfinityIcon, Ruler, Skull, Sun } from 'lucide-react';
import { MODE_DESCRIPTIONS, MODE_LABELS } from '../lib/modes';
import type { GameMode } from '../types';

type ModeSelectorProps = {
  activeMode: GameMode;
  onSelect: (mode: GameMode) => void;
};

const modes: Array<{ mode: GameMode; icon: typeof Sun }> = [
  { mode: 'daily', icon: Sun },
  { mode: 'infinite', icon: InfinityIcon },
  { mode: 'evil-daily', icon: Flame },
  { mode: 'custom', icon: Ruler },
  { mode: 'super-evil', icon: Skull },
];

export function ModeSelector({ activeMode, onSelect }: ModeSelectorProps) {
  return (
    <div className="grid gap-2 sm:grid-cols-2 xl:grid-cols-1">
      {modes.map(({ mode, icon: Icon }) => {
        const active = mode === activeMode;
        return (
          <button
            className={`rounded-lg border p-3 text-left transition ${
              active
                ? 'border-rose-400 bg-rose-500/15 shadow-ember'
                : 'border-slate-800 bg-slate-950/70 hover:border-slate-600'
            }`}
            key={mode}
            onClick={() => onSelect(mode)}
            type="button"
          >
            <span className="flex items-center gap-2 text-sm font-black text-slate-100">
              <Icon size={16} className={active ? 'text-rose-300' : 'text-slate-400'} />
              {MODE_LABELS[mode]}
            </span>
            <span className="mt-1 block text-xs leading-5 text-slate-400">{MODE_DESCRIPTIONS[mode]}</span>
          </button>
        );
      })}
    </div>
  );
}