import { FC } from 'react';

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

import { IconEdit } from '@material-hu/icons/tabler';

import ListItem from '@material-hu/components/design-system/List/components/ListItem';
import MenuItem from '@material-hu/components/design-system/Menu/components/MenuItem';

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

type MarketplacePostEditProps = {
  id: number;
};

const MarketplacePostEdit: FC<MarketplacePostEditProps> = ({ id }) => {
  const { t } = useTranslation(['general']);
  const navigate = useNavigate();

  const handleClick = () => {
    navigate(marketplaceRoutes.edit(id));
  };

  return (
    <MenuItem
      onClick={handleClick}
      sx={{ p: 0 }}
    >
      <ListItem
        sx={{ p: 0 }}
        avatar={{ Icon: IconEdit }}
        text={{ title: t('general:edit') }}
      />
    </MenuItem>
  );
};

export default MarketplacePostEdit;
