'use client';

import { motion } from 'framer-motion';

interface HamburgerButton {
  isOpen: boolean;
  toggleMobileMenu: () => void;
}

const Path = (props: React.ComponentProps<typeof motion.path>) => (
  <motion.path
    fill="transparent"
    strokeWidth="2.5"
    strokeLinecap="round"
    className="stroke-[#151720]"
    {...props}
  />
);

const HamburgerButton: React.FC<HamburgerButton> = ({ isOpen, toggleMobileMenu }) => {
  return (
    <motion.button
      onClick={toggleMobileMenu}
      className="flex lg:hidden items-center justify-center w-8 h-8"
      animate={{ rotate: isOpen ? 90 : 0, opacity: isOpen ? 0.9 : 1 }}
      transition={{ type: 'spring', stiffness: 260, damping: 20 }}
    >
      <motion.svg
        initial={false}
        animate={isOpen ? 'open' : 'closed'}
        viewBox="0 0 24 24"
        className="w-8 h-8"
      >
        <Path
          variants={{
            closed: { d: 'M 3 6 L 21 6' },
            open: { d: 'M 6 6 L 18 18' },
          }}
        />
        <Path
          d="M 3 12 L 21 12"
          variants={{
            closed: { opacity: 1 },
            open: { opacity: 0 },
          }}
          transition={{ duration: 0.2 }}
        />
        <Path
          variants={{
            closed: { d: 'M 3 18 L 21 18' },
            open: { d: 'M 6 18 L 18 6' },
          }}
        />
      </motion.svg>
    </motion.button>
  );
};

export default HamburgerButton;