"use client";


import { AnimatePresence , motion } from "framer-motion";

export interface ConfirmModalProps { 
    isShow: boolean;
    title: string; 
    content: string;
    okHandler?: () => void; 
    cancelHandler?: () => void;
    noOk?: boolean; 
    noCancel?: boolean; 
}

export function ConfirmModal({
    isShow,
    title,
    content,
    okHandler,
    cancelHandler,
    noOk,
    noCancel,
}: ConfirmModalProps) {

    const close = (result: boolean) => {
        if(result) {
            okHandler && okHandler();
        } else { 
            cancelHandler && cancelHandler();
        }
    };

  return (
    <AnimatePresence >
        {isShow && 
            <motion.div
                layout
                initial={{ opacity: 0, }}
                animate={{ opacity: 1 }}
                exit={{ opacity: 0 }}
                className="fixed z-1000 flex justify-center items-center bg-black/50 inset-0"
                onClick={(e) => e.stopPropagation()}
            >
                {/* <div className="fixed z-1000 flex justify-center items-center bg-black/40 inset-0"> */}
                    <div className="w-4/5 p-4 bg-white rounded-lg">
                        <h3 className="text-center text-ly-18 font-bold mb-6">{title}</h3>
                        <p className="text-ly-14 font-medium">{content}</p>
                        <div className="w-full flex justify-end gap-3 mt-6">
                            {!noOk && 
                                <button className="w-20 h-8 flex justify-center items-center rounded-xs bg-ly-green text-ly-12 font-medium text-white" 
                                    onClick={() => close(true)}
                                >OK</button>
                            }
                            {!noCancel && 
                                <button className="w-20 h-8 flex justify-center items-center rounded-xs bg-ly-gray text-ly-12 font-medium" 
                                    onClick={() => close(false)}
                                >Cancel</button>}
                        </div>
                    </div>
                {/* </div> */}
            </motion.div>
        }
    </AnimatePresence>
  );
}