import React from 'react';
import PropTypes from 'prop-types';

import Icon from '../../../../visuals/Icon';
import PlusIcon from '../../../../visuals/Icon/svg/ic_add.svg';
import MinusIcon from '../../../../visuals/Icon/svg/ic_minus.svg';
import MenuItem, { menuItemPropTypes } from '../MenuItem';

const SubmenuHead = ({ item, open, toggleSubmenu }) => (
  <MenuItem className="SubmenuHead" item={item}>
    <button
      className="SubmenuHead-toggleSubmenuButton"
      type="button"
      onClick={() => {
        toggleSubmenu(item);
      }}
    >
      <Icon icon={open ? MinusIcon : PlusIcon} />
    </button>
  </MenuItem>
);

SubmenuHead.propTypes = {
  item: PropTypes.shape(menuItemPropTypes).isRequired,
  open: PropTypes.bool.isRequired,
  toggleSubmenu: PropTypes.func.isRequired,
};

export default SubmenuHead;