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

const portfolioLinks = [
  "Google",
  "Facebook",
  "Amazon",
  "Microsoft",
  "Apple",
  "Tesla",
];

export const App = () => {
  const [isOpen, setIsOpen] = useState(false);

  return (
      <div className="flex h-[400px] items-end justify-center">
        <motion.div
          layout
          style={{ borderRadius: 12 }}
          className="flex flex-col overflow-clip bg-white p-4"
        >
          <AnimatePresence>
            {isOpen && (
              <motion.div
                variants={{
                  hidden: {
                    height: 0,
                    width: 0,
                    transition: {
                      delay: 0.2
                    }
                  },
                  visible: {
                    height: "auto",
                    width: 600,
                  }
                }}
                initial="hidden"
                animate="visible"
                exit="hidden"
                transition={{
                  staggerChildren: 0.03,
                  delayChildren: 0.2,
                }}
                className="grid grid-cols-2 w-[600px] *:px-4 *:py-2"
              >
                {portfolioLinks.map((linkTitle) => (
                  <motion.a
                    variants={{
                      visible: { opacity: 1, y: 0 },
                      hidden: { opacity: 0, y: 20 },
                    }}
                    key={linkTitle}
                    href="#"
                  >
                    {linkTitle}
                  </motion.a>
                ))}
              </motion.div>
            )}
          </AnimatePresence>

          <motion.ol
            layout
            className="mx-auto flex gap-4 relative z-10 bg-white *:rounded-3xl *:p-2 *:transition-colors hover:*:bg-gray-300"
          >
            <li>
              <a>Home</a>
            </li>
            <li>
              <button
                className="flex items-center gap-1"
                onClick={() => setIsOpen(!isOpen)}
              >
                Portfolio
              </button>
            </li>
            <li>
              <a>Contact</a>
            </li>
          </motion.ol>
        </motion.div>
      </div>
  );
};

export default App;