import PropTypes from 'prop-types';
import NavLink from '../shared/buttons/nav-link';
import { DEFAULT_DECKS_ROUTE } from '../utils/index';

function PaymentFailure(props) {
  const { code, error } = props;

  return (
    <div className='text-center text-xl'>
      <p>متاسفانه تراکنش ناموفق بود.</p>
      {code && (
        <p className='my-1'>
          <span>کد خطا: </span>
          <span className='plain-text'>{code}</span>
        </p>
      )}
      {error && (
        <div className='my-1'>
          <p>خطا: </p>
          <p>{error}</p>
        </div>
      )}
      <NavLink to={DEFAULT_DECKS_ROUTE} color='green' content='بازگشت' className='mx-auto my-6' />
    </div>
  );
}

PaymentFailure.propTypes = {
  code: PropTypes.string,
  error: PropTypes.string
};

export default PaymentFailure;
