import React from 'react'
import ModalWrapper from '../modals/ModalWrapper'
import MainBtn from '../MainBtn'

export default function RebuildModal({data={}, templateRebuild, closeModal, proceedFunc}) {
  return (
    <ModalWrapper maxWidth='max-w-sm'>
        <div className='relative bg-white rounded-lg shadow-round_black dark:border-[1px] dark:border-[#1E2027] dark:bg-black-box dark:text-white'>
            {/* <!-- Modal header --> */}
            {/* <div className="p-8 sm:p-12 flex items-center justify-between border-b rounded-t border-gray-300 dark:border-gray-600">
                <h3 className="text-xl font-semibold text-gray-900 dark:text-white">
                    EDIT
                </h3>
                <button onClick={closeModal} type="button" className="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white" data-modal-hide="default-modal">
                    <svg className="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
                        <path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
                    </svg>
                    <span className="sr-only">Close modal</span>
                </button>
            </div> */}
            {/* <!-- Modal body --> */}
            <div className='p-8 sm:p-12 mb-4 flex flex-col flex-wrap gap-4 lg:gap-8'>
                <div className='w-full text-center'>
                    <p className='text-lg font-semibold mb-1'>Please confirm you want product rebuild to start</p>
                    {templateRebuild.isPending && <p className='text-sm text-emerald-600'>Rebuild started ...</p>}
                </div>

                <div className='flex justify-between items-center gap-4'>
                    <MainBtn 
                        onClick={proceedFunc}
                        className={`bg-primary dark:bg-primary-dark px-2 py-1 mt-4 rounded-md text-white font-medium sm:self-end`}
                        text='Proceed'
                    />
                    <MainBtn 
                        type='button'
                        className={`bg-red-500 px-2 py-1 mt-4 rounded-md text-white font-medium sm:self-end`}
                        text='Cancel'
                        onClick={closeModal}
                    />
                </div>
            </div>
        </div>
    </ModalWrapper>
  )
}
