interface BurgerMenuIconProps {
  isToggled: boolean;
}

const BurgerMenuIcon = ({ isToggled }: BurgerMenuIconProps) => {
  return (
    <svg
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        className="border transition-all duration-300 ease-in-out"
        style={{
          transform: isToggled
            ? "rotate(-45deg) translate(-13.5px, 0) scaleX(1.2)"
            : "",
        }}
        d="M5 17L19 17"
        stroke="currentColor"
        strokeWidth="1.5"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
      <path
        className={`border transition-all duration-300 ease-in-out ${
          isToggled ? "opacity-0" : "opacity-100"
        }`}
        d="M5 12L19 12"
        stroke="currentColor"
        strokeWidth="1.5"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
      <path
        className="border transition-all duration-300 ease-in-out"
        style={{
          transform: isToggled
            ? "rotate(45deg) translate(2.5px, -7.66px) scaleX(1.2)"
            : "",
        }}
        d="M5 7L19 7"
        stroke="currentColor"
        strokeWidth="1.5"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </svg>
  );
};

export default BurgerMenuIcon;
