'use client'

import { GraduationCap, Timer, Layout } from 'lucide-react'
import { CompanionMode } from '@/lib/companion/types'

interface ModeToggleProps {
  currentMode: CompanionMode
  onModeChange: (mode: CompanionMode) => void
  disabled?: boolean
}

const modes: { id: CompanionMode; label: string; icon: React.ReactNode; description: string }[] = [
  {
    id: 'companion',
    label: 'Companion',
    icon: <GraduationCap className="w-4 h-4" />,
    description: 'Dashboard mit Vorschlaegen',
  },
  {
    id: 'lesson',
    label: 'Lesson',
    icon: <Timer className="w-4 h-4" />,
    description: 'Timer und Phasen',
  },
  {
    id: 'classic',
    label: 'Classic',
    icon: <Layout className="w-4 h-4" />,
    description: 'Klassische Ansicht',
  },
]

export function ModeToggle({ currentMode, onModeChange, disabled }: ModeToggleProps) {
  return (
    <div className="bg-white border border-slate-200 rounded-xl p-1 inline-flex gap-1">
      {modes.map((mode) => {
        const isActive = currentMode === mode.id
        return (
          <button
            key={mode.id}
            onClick={() => onModeChange(mode.id)}
            disabled={disabled}
            className={`
              flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium
              transition-all duration-200
              ${isActive
                ? 'bg-slate-900 text-white shadow-sm'
                : 'text-slate-600 hover:bg-slate-100 hover:text-slate-900'
              }
              ${disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}
            `}
            title={mode.description}
          >
            {mode.icon}
            <span>{mode.label}</span>
          </button>
        )
      })}
    </div>
  )
}