import PropTypes from 'prop-types';
import Modal from '../../shared/modal';
import Button from '../../shared/buttons/button';

function ResetModalStepError(props) {
  return (
    <Modal
      showModal
      onClose={props.onClose}
      header={<span className='text-red-400'>بازنشانی فلش کارت‌ها</span>}
      body={
        <div className='text-base'>
          <p>
            <span>بازنشانی فلش کارت های </span>
            <span className='font-semibold'>{props.itemLabel}</span>
            <span> با </span>
            <span className='font-medium text-red-500'>خطا</span>
            <span> مواجه شد.</span>
          </p>
          <p>در صورت تکرار لطفا ادمین سایت را در جریان قرار دهید.</p>
          <div className='my-2'>
            <p>
              <span className='font-semibold'>کد خطا: </span>
              <span>{props.error.status}</span>
            </p>
            <p>
              <span className='font-semibold'>اطلاعات خطا: </span>
              <span>{JSON.stringify(props.error.data)}</span>
            </p>
          </div>
        </div>
      }
      footer={
        <div className='flex justify-end'>
          <Button color='red' content='بازگشت' onClick={props.onClose} />
        </div>
      }
    />
  );
}

ResetModalStepError.propTypes = {
  itemLabel: PropTypes.string.isRequired,
  error: PropTypes.object.isRequired,
  onClose: PropTypes.func.isRequired
};

export default ResetModalStepError;
