'use client';

import { FC } from 'react';
import Image from 'next/image';

interface MenuSceneProps {
  language: 'fr' | 'en' | 'es';
  setLanguage: (lang: 'fr' | 'en' | 'es') => void;
  setNextScene: () => void;
}

const MenuScene: FC<MenuSceneProps> = ({ language, setLanguage, setNextScene }) => {
  return (
    <div className="relative w-screen h-screen">
      {/* Image de fond */}
      <Image
        src="https://ik.imagekit.io/z0tzxea0wgx/MistralGameJam/DD_start_P_osNnWmM.png?updatedAt=1737835883339"
        alt="Background"
        fill
        className="object-cover"
        priority
      />

      {/* Contenu du menu avec un fond semi-transparent */}
      <div className="relative z-10 flex flex-col items-end justify-center h-full w-full">
        {/* Sélecteur de langue */}

        <div className='flex flex-col items-center justify-center w-[20%] mr-[20%]'>
          <div className='w-full'>
            <select
              value={language}
              onChange={(e) => setLanguage(e.target.value as 'fr' | 'en' | 'es')}
              className="w-full px-4 py-2 rounded-lg bg-white text-slate-900 border border-slate-200 focus:outline-none focus:ring-2 focus:ring-blue-500"
            >
              <option value="fr">Français</option>
              <option value="en">English</option>
              <option value="es">Espanol</option>
            </select>
          </div>

          {/* Bouton Play */}
          <button
            onClick={setNextScene}
            className="px-8 py-4 text-xl w-full font-bold text-white bg-blue-600 rounded-lg hover:bg-blue-700 transition-colors mt-8"
          >
            {language === 'fr' ? 'Jouer' : language === 'en' ? 'Play' : 'Jugar'}
          </button>
          </div>

      </div>
    </div>
  );
};

export default MenuScene;