`components/ModeSelectionModal.tsx`

77 lines
'use client';

import { useState, useEffect } from 'react';

interface ModeSelectionModalProps {
  onSelectMode: (mode: 'text' | 'talk') => void;
}

export default function ModeSelectionModal({ onSelectMode }: ModeSelectionModalProps) {
  const [isMobile, setIsMobile] = useState(false);

  useEffect(() => {
    const checkMobile = () => {
      setIsMobile(window.innerWidth <= 768);
    };
    checkMobile();
    window.addEventListener('resize', checkMobile);
    return () => window.removeEventListener('resize', checkMobile);
  }, []);

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50 p-4">
      <div className="bg-white rounded-lg shadow-xl max-w-md w-full overflow-hidden">
        <div className="p-6 md:p-8 text-center">
          <h2 className="text-2xl md:text-3xl font-bold text-gray-900 mb-4">
            How do you want to chat with Bubbe?
          </h2>
          <p className="text-gray-600 mb-8 text-sm md:text-base">
            Choose your preferred way to interact
          </p>
          
          <div className="space-y-4">
            {/* Talk Mode Button */}
            <button
              onClick={() => onSelectMode('talk')}
              className="w-full p-6 bg-gradient-to-r from-purple-500 to-pink-500 text-white rounded-xl hover:from-purple-600 hover:to-pink-600 transition-all transform hover:scale-105 shadow-lg"
            >
              <div className="flex items-center justify-center space-x-3">
                <svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} 
                    d="M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m4 0h4m-4-8a3 3 0 01-3-3V5a3 3 0 116 0v6a3 3 0 01-3 3z" 
                  />
                </svg>
                <div className="text-left">
                  <div className="text-xl font-bold">Talk to Bubbe</div>
                  <div className="text-sm opacity-90">Voice conversation (like a phone call)</div>
                </div>
              </div>
            </button>

            {/* Text Mode Button */}
            <button
              onClick={() => onSelectMode('text')}
              className="w-full p-6 bg-gradient-to-r from-blue-500 to-teal-500 text-white rounded-xl hover:from-blue-600 hover:to-teal-600 transition-all transform hover:scale-105 shadow-lg"
            >
              <div className="flex items-center justify-center space-x-3">
                <svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} 
                    d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-4l-4 4z" 
                  />
                </svg>
                <div className="text-left">
                  <div className="text-xl font-bold">Text with Bubbe</div>
                  <div className="text-sm opacity-90">Type messages back and forth</div>
                </div>
              </div>
            </button>
          </div>

          <p className="text-xs text-gray-500 mt-6">
            You can always switch modes later from the menu
          </p>
        </div>
      </div>
    </div>
  );
}