import { memo } from 'react';

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

import useHuGoTheme from 'src/hooks/useHuGoTheme';
import { ButtonText } from 'src/pages/dashboard/feed/components/ButtonText';
import { useLokaliseTranslation as useTranslation } from 'src/utils/i18n';

export type CommentCountPostProps = {
  handleClickViewComments?: () => void;
  commentCount: number;
};

const CommentCountPost = ({
  handleClickViewComments,
  commentCount,
}: CommentCountPostProps) => {
  const { t } = useTranslation('web_only');
  const HugoThemeProvider = useHuGoTheme();

  return (
    <HugoThemeProvider>
      <ButtonText
        variant="tertiary"
        onClick={handleClickViewComments}
      >
        <Typography
          variant="globalXS"
          fontWeight="fontWeightSemiBold"
          sx={{ color: theme => theme.palette.new.text.neutral.lighter }}
        >
          {t('comments.comment_count', { count: commentCount })}
        </Typography>
      </ButtonText>
    </HugoThemeProvider>
  );
};

export default memo(CommentCountPost);