import { FC } from 'react';

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

import EditOutlinedIcon from '@material-hu/icons/material/EditOutlined';
import IconButton from '@material-hu/mui/IconButton';
import Tooltip from '@material-hu/mui/Tooltip';

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

export type EditSchedulePostProps = {
  postId: number;
};

const EditSchedulePost: FC<EditSchedulePostProps> = props => {
  const { postId } = props;

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

  const handleClick = () => {
    navigate(feedRoutes.post.edit(postId));
  };

  return (
    <Tooltip
      title={t('post:edit_post')}
      placement="top"
    >
      <IconButton
        onClick={handleClick}
        sx={{
          minWidth: '24px',
          height: '24px',
          mt: { xs: 1, sm: 0 },
          '&:hover': {
            color: '#000',
          },
        }}
      >
        <EditOutlinedIcon fontSize="small" />
      </IconButton>
    </Tooltip>
  );
};

export default EditSchedulePost;
