import React from 'react';

import { ButtonVariant } from '@/components/button/Button';

import { ModalButton } from '../../shared/ModalButton';

interface Props {
  purchaseStatus: 'paid' | 'failed' | 'void' | null;
  onClose(): void;
}

const CreditsCompletingStep: React.FC<Props> = ({
  purchaseStatus,
  onClose,
}) => (
  <div>
    <p className='mb-6'>
      {purchaseStatus === 'paid'
        ? 'Your new credits have been added to your account.'
        : 'The purchase was not successful and your payment method was not charged. Note that only credit card payments are supported for credit purchases. Please try again later or contact support if the issue persists.'}
    </p>

    <ModalButton variant={ButtonVariant.Primary} onClick={onClose}>
      Close
    </ModalButton>
  </div>
);

export default CreditsCompletingStep;