import { Dispatch } from "@reduxjs/toolkit";
import { useNavigate } from "react-router-dom";

type PropsType = {
    setShowTemplateDeleteWarnModal: React.Dispatch<{show: boolean, templateId: string}>;
    onConfirm: () => void;
};

const TemplateDeleteWarnModal = ({ setShowTemplateDeleteWarnModal, onConfirm }: PropsType) => {
    const navigate = useNavigate()

    return (
        <div className="fixed inset-0 backdrop-blur-sm bg-black/30 flex items-center justify-center z-50">
            <div className="bg-white rounded-lg shadow-xl p-6 w-100">
                <h3 className="text-lg font-medium text-gray-800 mb-4">Delete Confirmation.</h3>
                <p className="text-gray-600 mb-6">
                    Are you sure you want to proceed with deleting this template? This action cannot be undone.
                </p>
                <div className="flex justify-end gap-3">
                    <button
                        onClick={() => {
                            setShowTemplateDeleteWarnModal({show: false, templateId: ""});
                        }}

                        className="px-4 py-2 text-gray-600 hover:bg-gray-100 rounded-md transition-colors cursor-pointer"
                    >
                        No
                    </button>
                    <button
                        onClick={() => {
                            onConfirm();
                        }}
                        className="px-4 py-2 bg-red-600 text-white hover:bg-red-700 rounded-md transition-colors cursor-pointer"
                    >
                        Yes
                    </button>
                </div>
            </div>
        </div>
    );
};

export default TemplateDeleteWarnModal;