import { FC } from 'react';

import { useNavigate } from 'react-router-dom';

import { IconChartBar } from '@material-hu/icons/tabler';
import MenuItem from '@material-hu/mui/MenuItem';

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

import { groupsRoutes } from 'src/pages/dashboard/groups/routes';
import { useLokaliseTranslation as useTranslation } from 'src/utils/i18n';

export type GroupInsightsMenuItemProps = Omit<MenuItemProps, 'id'> & {
  id: number;
  groupId: string;
};

const GroupInsightsMenuItem: FC<GroupInsightsMenuItemProps> = props => {
  const { id, groupId, ...menuProps } = props;

  const { t: t2 } = useTranslation();
  const navigate = useNavigate();

  const handleClick = () => navigate(groupsRoutes.post.insights(groupId, id));

  return (
    <MenuItem
      {...menuProps}
      onClick={handleClick}
      sx={{ p: 0 }}
    >
      <HuListItem
        sx={{ p: 0 }}
        avatar={{ Icon: IconChartBar }}
        text={{ title: t2('INSIGHTS') }}
      />
    </MenuItem>
  );
};

export default GroupInsightsMenuItem;