import { memo } from 'react';

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

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 CommentPostButtonProps = {
  handleClickComment: () => void;
};

const CommentPostButton = ({ handleClickComment }: CommentPostButtonProps) => {
  const { t } = useTranslation(['post']);
  const HugoThemeProvider = useHuGoTheme();

  return (
    <HugoThemeProvider>
      <ButtonText
        variant="tertiary"
        onClick={handleClickComment}
        startIcon={<IconMessageCircle size={16} />}
        sx={{
          ml: 2,
        }}
      >
        {t('post:comment_action')}
      </ButtonText>
    </HugoThemeProvider>
  );
};

export default memo(CommentPostButton);