import React from 'react';
import IconButton from '@mui/material/IconButton';
import MenuIcon from '@mui/icons-material/Menu';
import CloseIcon from '@mui/icons-material/Close';

interface GlobalMenuButtonProps {
  open: boolean;
  onClick: (open: boolean) => void;
}

const KOSMenuButton = (props: GlobalMenuButtonProps): React.ReactElement => {
  const { open, onClick } = props;

  return (
    <>
      <IconButton
        color="inherit"
        aria-label="open drawer"
        onClick={() => onClick(true)}
        edge="start"
        sx={{
          marginRight: 4,
          marginLeft: '-2px',
          ...(open && { display: 'none' }),
        }}
      >
        <MenuIcon htmlColor="white" />
      </IconButton>
      <IconButton
        color="inherit"
        aria-label="close drawer"
        onClick={() => onClick(false)}
        edge="start"
        sx={{
          marginRight: 4,
          marginLeft: '-2px',
          ...(!open && { display: 'none' }),
        }}
      >
        <CloseIcon htmlColor="white" />
      </IconButton>
    </>
  );
};

export default KOSMenuButton;