"use client";

import { useEffect, useState } from "react";
import { motion, AnimatePresence } from "motion/react";

export function EasterEgg() {
  const [open, setOpen] = useState(false);

  useEffect(() => {
    const onKey = (e: KeyboardEvent) => {
      if (e.key.toLowerCase() !== "e") return;
      setOpen(true);
      window.setTimeout(() => setOpen(false), 2000);
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, []);

  return (
    <AnimatePresence>
      {open && (
        <motion.div
          className="easter-egg"
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          exit={{ opacity: 0 }}
        >
          <span className="rec-dot" /> REC
          <strong>PLAY</strong>
          <span>00:00:14:23</span>
        </motion.div>
      )}
    </AnimatePresence>
  );
}