import { memo } from 'react';

import { IconPlus } from '@material-hu/icons/tabler';
import Typography from '@material-hu/mui/Typography';

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

import useHuGoTheme from 'src/hooks/useHuGoTheme';
import { useLokaliseTranslation as useTranslation } from 'src/utils/i18n';

export type ShowMoreCommentsButtonProps = {
  handleLoadMoreComments: () => void;
};

const ShowMoreCommentsButton = ({
  handleLoadMoreComments,
}: ShowMoreCommentsButtonProps) => {
  const { t } = useTranslation('web_only');
  const HugoThemeProvider = useHuGoTheme();

  return (
    <HugoThemeProvider>
      <Button
        variant="tertiary"
        startIcon={<IconPlus size={16} />}
        sx={{
          width: 'fit-content',
          justifyContent: 'flex-start',
        }}
        onClick={handleLoadMoreComments}
      >
        <Typography
          variant="globalXS"
          fontWeight="fontWeightSemiBold"
          sx={{ color: theme => theme.palette.new.text.neutral.default }}
        >
          {t('comments.show_more_comments')}
        </Typography>
      </Button>
    </HugoThemeProvider>
  );
};

export default memo(ShowMoreCommentsButton);