import cc from 'classcat';
import { ReactComponent as MenuIcon } from 'assets/icons/menu.svg';

import './MenuIconButton.css';

interface MenuIconButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
  disabled?: boolean;
}

export const MenuIconButton = ({
  className,
  disabled,
  ...props
}: MenuIconButtonProps) => {
  const cn = cc(['menu-button', className, { disabled }]);

  return (
    <button className={cn} {...props}>
      <MenuIcon
        style={{
          height: '100%',
          transform: 'scale(.6) rotate(90deg)',
          pointerEvents: 'none',
        }}
      />
    </button>
  );
};