`components/ModeSelector.tsx`

99 lines
'use client'

import { useState } from 'react'

interface Mode {
  id: string
  name: string
  icon: string
  description: string
  color: string
  bgGradient: string
}

const MODES: Mode[] = [
  {
    id: 'bubbe',
    name: 'Bubbe',
    icon: '🥯',
    description: 'Sarcastic Jewish grandma with zero filter',
    color: 'text-purple-100',
    bgGradient: 'from-purple-600 to-pink-600'
  },
  {
    id: 'meshugana',
    name: 'Meshugana',
    icon: '🤪',
    description: 'Crazy grandpa who thinks YOU\'RE nuts',
    color: 'text-orange-100',
    bgGradient: 'from-orange-500 to-red-500'
  },
  {
    id: 'comedian',
    name: 'Comedian',
    icon: '🎤',
    description: 'Stand-up comedy with Jewish humor',
    color: 'text-blue-100',
    bgGradient: 'from-blue-500 to-indigo-600'
  }
]

interface ModeSelectorProps {
  currentMode: string
  onModeChange: (mode: string) => void
  className?: string
}

export default function ModeSelector({ currentMode, onModeChange, className = '' }: ModeSelectorProps) {
  const [isChanging, setIsChanging] = useState(false)

  const handleModeChange = async (modeId: string) => {
    if (modeId === currentMode || isChanging) return
    
    setIsChanging(true)
    
    // Add small delay for visual feedback
    setTimeout(() => {
      onModeChange(modeId)
      setIsChanging(false)
    }, 300)
  }

  const currentModeData = MODES.find(mode => mode.id === currentMode) || MODES[0]

  return (
    <div className={`w-full ${className}`}>
      {/* Mode Buttons */}
      <div className="flex gap-3 justify-center mb-4">
        {MODES.map((mode) => (
          <button
            key={mode.id}
            onClick={() => handleModeChange(mode.id)}
            disabled={isChanging}
            className={`
              flex flex-col items-center p-4 rounded-xl border-2 transition-all duration-300 min-h-[80px] flex-1 max-w-[120px]
              ${currentMode === mode.id
                ? `bg-gradient-to-br ${mode.bgGradient} border-white/30 shadow-lg`
                : 'bg-white/10 border-white/20 hover:bg-white/20 hover:border-white/40'
              }
              ${isChanging ? 'opacity-50 pointer-events-none' : 'hover:-translate-y-1'}
              backdrop-blur-sm
            `}
          >
            <span className="text-2xl mb-1">{mode.icon}</span>
            <span className={`text-xs font-semibold uppercase tracking-wide ${mode.color}`}>
              {mode.name}
            </span>
          </button>
        ))}
      </div>

      {/* Current Mode Description */}
      <div className="text-center">
        <p className="text-white/80 text-sm font-medium">
          {currentModeData.description}
        </p>
      </div>
    </div>
  )
}