import { motion } from 'framer-motion';
import { Shield, Gamepad2 } from 'lucide-react';
import { cn } from '@/lib/cn';
import { GAME_MODES } from '@/lib/constants';

interface ModeSelectorProps {
  selected: string;
  onSelect: (mode: string) => void;
}

const icons = { Shield, Gamepad2 };

export function ModeSelector({ selected, onSelect }: ModeSelectorProps) {
  return (
    <div>
      <h3 className="text-sm font-medium text-text-secondary uppercase tracking-wider mb-3">Game Mode</h3>
      <div className="grid grid-cols-2 gap-3">
        {GAME_MODES.map((mode) => {
          const isSelected = selected === mode.id;
          const Icon = icons[mode.icon as keyof typeof icons];
          return (
            <motion.button
              key={mode.id}
              onClick={() => onSelect(mode.id)}
              whileHover={{ scale: 1.02 }}
              whileTap={{ scale: 0.98 }}
              className={cn(
                'relative p-5 rounded-xl border-2 text-left transition-all duration-200',
                isSelected
                  ? 'border-amber-500 bg-amber-500/5 shadow-[0_0_16px_rgba(245,158,11,0.15)]'
                  : 'border-white/10 bg-bg-surface hover:border-white/20 hover:bg-bg-elevated'
              )}
            >
              <Icon className={cn(
                'w-6 h-6 mb-2',
                isSelected ? 'text-amber-500' : 'text-text-muted'
              )} />
              <h4 className={cn(
                'text-base font-bold',
                isSelected ? 'text-text-primary' : 'text-text-secondary'
              )}>
                {mode.name}
              </h4>
              <p className="text-xs text-text-muted mt-0.5">{mode.description}</p>

              {isSelected && (
                <motion.div
                  layoutId="mode-selected"
                  className="absolute top-3 right-3 w-2 h-2 rounded-full bg-amber-500"
                  transition={{ type: 'spring', stiffness: 400, damping: 25 }}
                />
              )}
            </motion.button>
          );
        })}
      </div>
    </div>
  );
}
