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

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

import Button from '@material-hu/components/design-system/Buttons/Button';

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

export const MyMarketplacePostsButton: FC = () => {
  const { t } = useTranslation(['post']);
  const navigate = useNavigate();

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

  return (
    <Button
      onClick={handleClick}
      variant="text"
    >
      <Typography
        variant="globalXS"
        fontWeight="fontWeightSemiBold"
        sx={{
          color: theme => theme.palette.new.text.neutral.brand,
        }}
      >
        {t('post:see_posts')}
      </Typography>
    </Button>
  );
};

export default MyMarketplacePostsButton;
