import React from 'react';
import {useTranslation} from 'react-i18next';
import {isAfter} from 'date-fns';
import {Alert} from '@components';
import {DraftPost} from '@modules/drafts/interfaces';
import {getDate, getTime} from '@shared/utils';

interface Props {
  draft: DraftPost;
}

function StatusAlert({draft}: Props) {
  const {t} = useTranslation();
  const {publicationDatetime} = draft.post;

  const isOverdue = !isAfter(publicationDatetime, new Date());
  const date = getDate(publicationDatetime);
  const time = getTime(publicationDatetime);

  const title = t(
    isOverdue
      ? 'drafts.detail.scheduled_post_overdue'
      : 'drafts.detail.scheduled_post',
  );
  const description = t(
    isOverdue
      ? 'drafts.detail.scheduled_post_overdue_description'
      : 'drafts.detail.scheduled_post_description',
    {date, time},
  );
  const variant = isOverdue ? 'warning' : 'info';

  return <Alert title={title} description={description} variant={variant} />;
}

export default StatusAlert;