import { bool, func, node, string } from 'prop-types';
import * as React from 'react';
import cx from 'classnames';
import style from './MenuSidelevel.module.scss';

const MenuSidelevel = ({ label, disabled, onSelect, className, active, ...rest }) => {
  return (
    <button
      type="button"
      disabled={disabled}
      className={cx(style.button, active && style.active, className)}
      onClick={onSelect}
      {...rest}
    >
      {label}
    </button>
  );
};

MenuSidelevel.propTypes = {
  label: string.isRequired,
  onClick: func, // Added by Menu
  children: node.isRequired, // Used by Menu
  disabled: bool,
};

MenuSidelevel.defaultProps = {
  onSelect: undefined,
  disabled: false,
};

export default MenuSidelevel;