"use client";

import { AnimatePresence, motion } from "framer-motion";
import { confirmStore } from "./store";
import { useConfirmQueue } from "./useConfirm";

export function ConfirmHost() {
  const {queue} = useConfirmQueue();

  const current = queue[0];

//   if (!current) return null;

  const close = (result: boolean) => {
    current.resolve(result);

    confirmStore.setState({
      queue: queue.slice(1),
    });
  };

  return (
    <AnimatePresence>
        {current && <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">{current.title}</h3>
                    <p className="text-ly-14 font-medium">{current.content}</p>
                    <div className="w-full flex justify-end gap-3 mt-6">
                        {!current.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>}
                        {!current.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>
  );
}

