import React from 'react';
import { Box, MainButton, ModalHeader, Text } from '@nova-hf/ui';
import { formatDate } from 'beta/utils/helpers';
import { useTranslation } from 'utils/i18n';

type CancelProps = {
  cancel: () => void;
  decline: () => void;
  validUntil: Date;
};

export const Cancel = ({ cancel, decline, validUntil }: CancelProps) => {
  const { t } = useTranslation('cancel');
  const valid = formatDate(validUntil, 'dd.MM.yyyy');

  return (
    <Box display="flex" flexDirection="column">
      <ModalHeader
        title={t('steps.confirmation.buttonConfirm')}
        eyebrow={t('steps.confirmation.heading')}
        color="warning"
      />
      <Box marginY={3}>
        <Text variant="pLargeRegular"> {t('steps.confirmation.description')}</Text>
      </Box>
      <Box>
        <Text variant="pLargeBold">
          {t('steps.confirmation.validUntil', { validUntil: valid })}
        </Text>
      </Box>
      <Box display="flex" marginTop={4} flexDirection={['column', 'row', 'row']} gap={4}>
        <MainButton
          text={t('steps.confirmation.cancel')}
          colorScheme="white"
          dottedShadow="none"
          icon="longArrowRight"
          onClick={() => decline()}
        />
        <MainButton
          text={t('steps.reason.alternativeHeading')}
          colorScheme="warning"
          dottedShadow="none"
          onClick={() => cancel()}
        />
      </Box>
    </Box>
  );
};