client/src/components/screens/MainMenu.tsx

import { useState } from 'react';
import { motion } from 'framer-motion';
import { useGameStore } from '../../store/gameStore';

export function MainMenu() {
  const [playerName, setPlayerName] = useState('');
  const setScreen = useGameStore((state) => state.setScreen);
  const setPlayerNameInStore = useGameStore((state) => state.setPlayerName);
  const isConnected = useGameStore((state) => state.isConnected);

  const handlePlay = () => {
    if (!playerName.trim()) {
      useGameStore.getState().addToast('Please enter your name!', 'warning');
      return;
    }
    setPlayerNameInStore(playerName.trim());
    setScreen('lobby');
  };

  return (
    <div 
      className="flex-1 flex flex-col items-center justify-center p-2 md:p-4 overflow-auto"
      style={{
        backgroundImage: 'url(/Assests/menu_background.png)',
        backgroundSize: 'cover',
        backgroundPosition: 'center',
      }}
    >
      <motion.div
        initial={{ opacity: 0, y: -50 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.5 }}
        className="bg-black/60 backdrop-blur-sm rounded-xl md:rounded-2xl p-3 md:p-8 max-w-md w-full"
      >
        {/* Logo */}
        <motion.img
          src="/Assests/ui_logo.png"
          alt="Khofo Card Game"
          className="w-16 h-16 md:w-48 md:h-48 mx-auto mb-2 md:mb-6 object-contain"
          initial={{ scale: 0 }}
          animate={{ scale: 1, rotate: [0, -5, 5, 0] }}
          transition={{ duration: 0.5, delay: 0.2 }}
          onError={(e) => {
            (e.target as HTMLImageElement).style.display = 'none';
          }}
        />
        
        <h1 className="text-lg md:text-3xl font-bold text-center text-egyptian-gold mb-0">
          Khofo Card Game
        </h1>
        <h2 className="text-sm md:text-xl text-center text-papyrus mb-2 md:mb-8" dir="rtl">
          هتتحنط هنا
        </h2>

        {/* Connection status */}
        <div className="flex items-center justify-center gap-2 mb-2 md:mb-6">
          <span className={`w-2 h-2 rounded-full ${isConnected ? 'bg-green-500' : 'bg-red-500'}`} />
          <span className="text-[10px] md:text-sm text-papyrus">
            {isConnected ? 'Connected' : 'Connecting...'}
          </span>
        </div>

        {/* Name input */}
        <div className="mb-2 md:mb-6">
          <label className="block text-papyrus text-xs md:text-base mb-1">Your Name</label>
          <input
            type="text"
            value={playerName}
            onChange={(e) => setPlayerName(e.target.value)}
            placeholder="Enter your name..."
            className="w-full text-sm md:text-base"
            maxLength={20}
            onKeyDown={(e) => e.key === 'Enter' && handlePlay()}
          />
        </div>

        {/* Play button */}
        <motion.button
          className="btn btn-primary w-full text-sm md:text-xl py-2 md:py-3"
          onClick={handlePlay}
          disabled={!isConnected}
          whileHover={{ scale: 1.02 }}
          whileTap={{ scale: 0.98 }}
        >
          Play Game
        </motion.button>
      </motion.div>
    </div>
  );
}