// src/pages/Auth/AuthLogin.jsx
// Kártya amelyiken a bejelentkezés és regisztráció van

import { motion, AnimatePresence } from "framer-motion";
import Animation from "../../assets/SerpentRace_Animation/SerpentRace_Animation";
import LoginForm from "./LoginForm";
import RegisterForm from "./RegisterForm";
import Logo from "../../assets/pictures/Logo";

export default function AuthCard({ isRegistering, setIsRegistering }) {
  return (
    <motion.div
      initial={{ height: "auto" }}
      animate={{ height: isRegistering ? "600px" : "385px" }}
      transition={{ duration: 0.5, ease: "easeInOut" }}
      className="absolute flex max-w-4xl w-full bg-white rounded-2xl shadow-lg overflow-hidden"
    >
      {/* Bal oldali kép és szöveg */}
      <div
        className={`transition-all duration-500 ${isRegistering ? 'w-0 p-0' : 'w-2/5 p-8'} flex flex-col justify-center items-center bg-gradient-to-r from-mint-darker to-mint text-white `}
      >
        <Logo size={100}/>
        <div className="h-6" />
        <Animation sizePercentage={30} />
        <p className="text-lg mt-0 text-center font-light whitespace-nowrap overflow-hidden">
          Lépj be és légy a legjobb!  
        </p>
      </div>

      {/* Jobb oldali űrlap */}
      <div className="w-full p-10 relative">
        <AnimatePresence mode="wait">
          {isRegistering ? <RegisterForm /> : <LoginForm />}
        </AnimatePresence>
        <span
          className="text-secondary cursor-pointer hover:underline mt-4 block text-center"
          onClick={() => setIsRegistering(!isRegistering)}
        >
          {isRegistering
            ? "Már van fiókod? Jelentkezz be itt!"
            : "Nincs még fiókod? Regisztrálj itt!"}
        </span>
      </div>
    </motion.div>
  );
}