import { Dispatch, SetStateAction } from "react";

export const ConfirmModal = ({ showModal, setShowModal, onConfirm, title, description }: {
    showModal: boolean;
    setShowModal: Dispatch<SetStateAction<boolean>>;
    onConfirm: () => void;
    title: string;
    description: string;
}) =>
{

    return (
            <>
                { showModal ? (
                        <>
                            <div
                                    className="justify-center items-center flex overflow-x-hidden overflow-y-auto fixed inset-0 z-50 outline-none focus:outline-none"
                            >
                                <div className="relative w-auto my-6 mx-auto max-w-3xl">

                                    <div className="border-0 rounded-lg shadow-lg relative flex flex-col w-full bg-strokedark outline-none focus:outline-none">

                                        <div className="flex items-start justify-between p-5">
                                            <h3 className="text-3xl font-semibold text-meta-2">
                                                { title }
                                            </h3>
                                            <button
                                                    className="p-1 ml-auto bg-transparent border-0 text-meta-2 opacity-5 float-right text-3xl leading-none font-semibold outline-none focus:outline-none"
                                                    onClick={ () => setShowModal(false) }
                                            >
                                        <span className="bg-transparent text-meta-2 opacity-5 h-6 w-6 text-2xl block outline-none focus:outline-none">
                                            ×
                                        </span>
                                            </button>
                                        </div>

                                        <div className="relative p-6 flex-auto">
                                            <p className="my-4 text-blueGray-500 text-lg leading-relaxed  text-meta-2">
                                                { description }
                                            </p>
                                        </div>


                                        <div className="flex items-center justify-end p-6 rounded-b">
                                            <button
                                                    className="text-red-500 background-transparent font-bold uppercase px-6 py-2 text-sm outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150"
                                                    type="button"
                                                    onClick={ () => setShowModal(false) }
                                            >
                                                Close
                                            </button>
                                            <button
                                                    className="bg-emerald-500 text-white active:bg-emerald-600 font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150"
                                                    type="button"
                                                    onClick={ () =>
                                                    {
                                                        setShowModal(false);
                                                        onConfirm();
                                                    } }
                                            >
                                                Confirm
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div className="opacity-25 fixed inset-0 z-40 bg-black"></div>
                        </>
                ) : null }
            </>
    );
};