import React, { useContext } from 'react';
import PropTypes from 'prop-types';
import { NavigationContext } from '~organisms/navigation/navigationContext';
import styles from './menu-icon.module.scss';

const MenuIcon = ({ onClick, gtmClass }) => {
  const { showMenu } = useContext(NavigationContext);

  return (
    <div
      className={`${styles.menuIconContainer || ''} ${gtmClass}`}
      onKeyDown={() => onClick()}
      onClick={() => onClick()}
      role="button"
      aria-label="Menu Icon"
      tabIndex={0}
    >
      <div className={`${styles.menuIcon || ''} ${(showMenu && styles.active) || ''}`}>
        <div />
      </div>
    </div>
  );
};

MenuIcon.propTypes = {
  onClick: PropTypes.func,
  gtmClass: PropTypes.string,
};

export default MenuIcon;
