import Typography from '@material-hu/mui/Typography';

import HuMenuItem from '@material-hu/components/design-system/Menu/components/MenuItem';
import { MenuItemProps } from '@material-hu/components/design-system/Menu/components/MenuItem/types';

import { useMoreMenu } from 'src/contexts/MoreMenuContext';
import useHuGoTheme from 'src/hooks/useHuGoTheme';
import { useLokaliseTranslation as useTranslation } from 'src/utils/i18n';

export type PostCommentEditProps = Omit<MenuItemProps, 'id'> & {
  onClick?: () => void;
};

const PostCommentEdit = ({ onClick, ...menuProps }: PostCommentEditProps) => {
  const { t } = useTranslation();
  const HugoThemeProvider = useHuGoTheme();
  const { closeMenu } = useMoreMenu();

  const handleClickMenuItem = () => {
    onClick?.();
    closeMenu();
  };

  return (
    <HugoThemeProvider>
      <HuMenuItem
        {...menuProps}
        onClick={handleClickMenuItem}
      >
        <Typography
          variant="globalS"
          fontWeight="fontWeightSemiBold"
        >
          {t('EDIT')}
        </Typography>
      </HuMenuItem>
    </HugoThemeProvider>
  );
};

export default PostCommentEdit;