import React from 'react';
import { Box, NotificationBanner } from '@nova-hf/ui';
import { MainColorType } from '@nova-hf/ui/umd/ts/src/styles/vars.css';
import { useTranslation } from 'beta/utils/i18n';
import { useRouter } from 'next/router';

type PaymentOptionsProps = {
  postpone: () => void;
  color: MainColorType;
};

export const PaymentOptions = ({ postpone, color }: PaymentOptionsProps) => {
  const { t } = useTranslation('alltSaman');
  const router = useRouter();
  const customerId = router.query.customerId ?? '';
  const contractId = router.query.contractId ?? '';
  return (
    <Box>
      <NotificationBanner
        description={t('alltSaman.paymentFailed')}
        eyebrowText={t('alltSaman.action')}
        color={color}
        hasPingAlert
        icon="walletEmpty"
        mainButtonColored={{
          icon: 'longArrowRight',
          text: t('alltSaman.changePaymentMethod'),
          dottedShadow: 'none',
          onClick: () => router.push(`/beta/${customerId}/askriftir/${contractId}/greidslumati`),
        }}
        mainButtonWhite={{
          icon: 'longArrowRight',
          text: t('alltSaman.postpone'),
          dottedShadow: 'none',
          onClick: () => postpone(),
        }}
        title={t('alltSaman.paymentNotWorking')}
      />
    </Box>
  );
};