import React, { useContext, FC } from 'react';

import { MenuContext } from '../context';
import { MenuItemProps } from '../types.d';
import { StyledMenuItem } from '../styled-components';
import { Title } from '../../Title';
import { useTheme } from '../../Theme';

const SquareMenuTitle: FC<MenuItemProps> = ({ onClick = () => {}, title }) => {
  const theme = useTheme();
  const { toggleMenu } = useContext(MenuContext);
  return (
    <StyledMenuItem
      className="square-menu-item"
      $theme={theme}
      onClick={(e) => {
        onClick();
        toggleMenu(e as unknown as React.MouseEvent<HTMLButtonElement, MouseEvent>);
      }}
    >
      <Title size={14}>{title}</Title>
    </StyledMenuItem>
  );
};

// eslint-disable-next-line react/prefer-stateless-function
export class MenuTitle extends React.PureComponent<MenuItemProps> {
  render(): React.ReactElement {
    // eslint-disable-next-line react/jsx-props-no-spreading
    return <SquareMenuTitle {...this.props} />;
  }
}
