import React, { useState } from 'react';

const ConfirmModal = ({ type, onSubmit, onClose, message, loading ,header}) => {
  
  const TypeofIcon = (type) => {
    switch (type) {
      case "delete":
        return <i className='bx bx-x-circle text-danger ' style={{fontSize:"60px"}} ></i>;
      default:
        return null;
    }
  };

  const TypeofModal = (type) => {
    switch (type) {
      case "delete":
        return "sm";
      case "other":
        return "md";
      default:
        return "sm"; // Return a default modal size
    }
  };

  return (
    <div className={`modal-dialog modal-${TypeofModal(type)} modal-simple modal-confirm`}>
      <div className='modal-dialog modal-dialog-centered'>
        <div className="modal-content">
          <div className="modal-body">
            <div className="row">
             
              <div className="text-start mb-1">
               
              <div className=' d-flex justify-content-between mb-4'>
              {header && < strong className='mb-0 font-weight-bold'>{header }</strong>}
              <button
                type="button"
                className="btn-close"
                aria-label="Close"
                onClick={onClose}
              />
              </div>
                
                <div className='row'>
                  <div className='col-4 col-sm-2'> {TypeofIcon(type)}</div>
                  <div className='col-8 col-sm-10 py-sm-2 py-1 text-sm-end'>
                    <span className='fs-6 text'>{message}</span>
                    <div className='d-flex justify-content-center mt-4'>
                  <button
                    className='btn btn-primary btn-sm'
                    onClick={onSubmit}
                    disabled={loading} 
                  >
                    {loading ? "Please Wait..." : "Yes"}
                  </button>
                  <button
                    className='btn btn-secondary ms-4 btn-sm'
                    onClick={onClose}
                    disabled={loading} 
                  >
                    No
                  </button>
                </div>
                  </div>
                </div>
           
             
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default ConfirmModal;