import { HeaderToggleButton } from './Buttons';
import { useLayoutDrawerState } from '@/components/Layout/Provider';
import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons';

const buttonSx = {
  ml: { xs: 0, lg: -2 }
};

function DrawerToggle() {
  const { open, handleDrawerToggle } = useLayoutDrawerState();

  return (
    <HeaderToggleButton
      value="drawer"
      aria-label="open drawer"
      sx={buttonSx}
      onChange={handleDrawerToggle}
      selected={open}
    >
      {!open ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
    </HeaderToggleButton>
  );
}

export { DrawerToggle };