import React from 'react';

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

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

interface Props {
  actionName: string;
  onClose: () => void;
  errorMessage?: string | null;
}

const ErrorStep: React.FC<Props> = ({ actionName, onClose, errorMessage }) => (
  <div>
    <p className='mb-6 text-white/80'>
      {errorMessage ||
        `Your ${actionName.toLowerCase()} failed. Your saved payment method was not charged.`}
    </p>

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

export default ErrorStep;