"use client";
import { motion } from "framer-motion";
import { useRouter } from "next/navigation";
import { useAppStore } from "@/_stores/useAppStore";

export default function LandingPage() {
  const { setUserContext } = useAppStore();

  return (
    <div className="flex flex-col items-center justify-center min-h-screen bg-white text-black">
      <div className="flex flex-col items-center justify-center text-black h-full flex-grow box">
            <motion.div
              key="cards"
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              transition={{ duration: 1 }}
              className="flex gap-8"
            >
              <Card title="FIFA.io" setUserContext={setUserContext} />
              <Card title="VICTVS.io" setUserContext={setUserContext} />
            </motion.div>
      </div>
    </div>
  );
}

interface CardProps {
  title: string;
  setUserContext: (context: string) => void;
}

function Card({ title, setUserContext }: CardProps) {
  const router = useRouter();

  const onClick = () => {
    const context = title === "VICTVS.io" ? "victvs" : "fifa";
    setUserContext(context);
    router.push("/login");
  };

  return (
    <motion.div
      whileHover={{ scale: 1.2, rotate: 2 }}
      whileTap={{ scale: 0.95 }}
      className="w-30 h-20 
                 rounded-2xl shadow-lg flex items-center justify-center
                 text-xl font-bold cursor-pointer border-2 border-pink-600
                 backdrop-blur-md text-pink-500 hover:bg-pink-100/20"
      onClick={onClick}
    >
      {title}
    </motion.div>
  );
}