const ConfirmAlert = ({
  title,
  caption,
  show,
  onClose,
  onSubmit,
}) => {
  return (
    <>
      {show && (
        <div className="menu-overlay" onClick={onClose}></div>
      )}
      <div className={"p-4 rounded border bg-white border-gray_r-6 fixed top-[50%] left-[50%] translate-x-[-50%] z-[70] w-[80%] translate-y-[-50%] " + (show ? "block" : "hidden")}>
        <p className="h2 mb-2">{title}</p>
        <p className="text-gray_r-11 mb-6">{caption}</p>
        <div className="flex gap-x-2">
          <button className="flex-1 btn-light" onClick={onClose}>Batal</button>
          <button className="flex-1 btn-red" onClick={onSubmit}>Hapus</button>
        </div>
      </div>
    </>
  );
};

export default ConfirmAlert;