// 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 ? "750px" : "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 - csak desktop */}
      <div
        className={`hidden md:flex transition-all duration-500 ${
          isRegistering ? "w-0 p-0" : "w-2/5 p-8"
        } 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="hidden md:block text-lg mt-0 text-center font-light 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>
  )
}