import React from "react";

import { Icon } from "../../../../molecules/Icon";

import type { FC } from "react";

import {onKeyDown} from "../../../../utils/onKeyDown";

import type { HamburgerMenuProps } from "../../header.types";

export const Hamburger: FC<HamburgerMenuProps> = ({
  isMobileNavOpen,
  setIsMobileNavOpen,
  className,
}) => (
  <button
    aria-label="menu-toggle-button"
    title={isMobileNavOpen ? "close" : "open"}
    onClick={() => setIsMobileNavOpen(!isMobileNavOpen)}
    onKeyDown={(e) => onKeyDown(e, () => setIsMobileNavOpen(!isMobileNavOpen))}
    className={className}
  >
    {isMobileNavOpen ? (
      <Icon
        id="x-close"
        className="tw-common-white"
        stroke="currentColor"
        size={24}
      />
    ) : (
      <Icon
        id="menu-01"
        className="tw-common-white"
        size={24}
        stroke="currentColor"
      />
    )}
  </button>
);
