'use client'

import { FMScenario } from '@/lib/types'
import { motion } from 'framer-motion'

interface ScenarioSwitcherProps {
  scenarios: FMScenario[]
  activeId: string | null
  compareMode: boolean
  onSelect: (id: string) => void
  onToggleCompare: () => void
  lang: 'de' | 'en'
}

export default function ScenarioSwitcher({
  scenarios,
  activeId,
  compareMode,
  onSelect,
  onToggleCompare,
  lang,
}: ScenarioSwitcherProps) {
  return (
    <div className="space-y-2">
      <div className="flex items-center justify-between">
        <p className="text-[10px] text-white/40 uppercase tracking-wider">
          {lang === 'de' ? 'Szenarien' : 'Scenarios'}
        </p>
        <button
          onClick={onToggleCompare}
          className={`text-[10px] px-2 py-1 rounded-lg transition-colors
            ${compareMode
              ? 'bg-indigo-500/30 text-indigo-300 border border-indigo-500/40'
              : 'bg-white/[0.06] text-white/40 border border-white/10 hover:text-white/60'
            }`}
        >
          {lang === 'de' ? 'Vergleichen' : 'Compare'}
        </button>
      </div>

      <div className="flex gap-2">
        {scenarios.map((s) => (
          <motion.button
            key={s.id}
            whileTap={{ scale: 0.95 }}
            onClick={() => onSelect(s.id)}
            className={`flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs transition-all
              ${activeId === s.id
                ? 'bg-white/[0.12] border border-white/20 text-white'
                : 'bg-white/[0.04] border border-white/10 text-white/50 hover:text-white/70'
              }`}
          >
            <span
              className="w-2 h-2 rounded-full"
              style={{ backgroundColor: s.color }}
            />
            {s.name}
          </motion.button>
        ))}
      </div>
    </div>
  )
}