"use client";

import { motion } from "framer-motion";

type NavMenuBtnProps = {
  isOpen: boolean;
  onToggle: () => void;
};

const NavMenuBtn = ({ isOpen, onToggle }: NavMenuBtnProps) => {
  return (
    <button
      onClick={onToggle}
      className="md:hidden w-6 z-20 flex flex-col cursor-pointer gap-1"
      aria-controls="mobile-menu"
      aria-expanded={isOpen}
      aria-label={isOpen ? "Cerrar menú" : "Abrir menú"}
    >
      <motion.span
        className="w-full h-[0.1875rem] bg-contigo-violeta"
        animate={isOpen ? { rotate: 45, y: "0.4375rem" } : undefined}
      />
      <motion.span
        className="w-full h-[0.1875rem] bg-contigo-violeta"
        animate={isOpen ? { x: 5, opacity: 0 } : undefined}
      />
      <motion.span
        className="w-full h-[0.1875rem] bg-contigo-violeta"
        animate={isOpen ? { rotate: -45, y: "-0.4375rem" } : undefined}
      />
    </button>
  );
};
export default NavMenuBtn;