import { FC } from 'react';

import HuPills from '@material-hu/components/design-system/Pills';
import { useLokaliseTranslation as useTranslation } from 'src/utils/i18n';

import { isPollEnded, formatPollDeadlineMessage } from 'src/utils/poll';

type PollDeadlineDisplayProps = {
  endsAt?: string | null;
};

const PollDeadlineDisplay: FC<PollDeadlineDisplayProps> = ({ endsAt }) => {
  const { t } = useTranslation('post');

  const pollEnded = isPollEnded(endsAt ?? null);
  const deadlineMessage = formatPollDeadlineMessage(endsAt ?? null, t);

  if (!deadlineMessage) {
    return null;
  }

  return (
    <HuPills
      label={deadlineMessage}
      variant="filled"
      type={pollEnded ? 'warning' : 'info'}
      size="small"
      sx={{
        width: 'fit-content',
      }}
    />
  );
};

export default PollDeadlineDisplay;