"use client";

import { 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 (
    <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>
  );
}