'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> = ({ setLanguage, setNextScene }) => {

  const handleLanguageSelect = (language: 'fr' | 'en' | 'es') => {
    setLanguage(language);
    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">
        <div className="flex flex-col gap-10 mr-[20vw]">
            <button
              onClick={() => handleLanguageSelect('fr')}
              className="text-8xl text-white roboto-slab hover:text-sky-500 transition-colors"
            >
              Français
            </button>
            <button
              onClick={() => handleLanguageSelect('en')}
              className="text-8xl text-white roboto-slab hover:text-sky-500 transition-colors"
            >
              English
            </button>
            <button
              onClick={() => handleLanguageSelect('es')}
              className="text-8xl text-white roboto-slab hover:text-sky-500 transition-colors"
            >
              Español
            </button>
        </div>
      </div>
    </div>
  );
};

export default MenuScene;