import { useState } from "react";

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-4">{title}</p>
        <div className="flex gap-x-2">
          <button className="flex-1 btn-light" onClick={onClose}>Batal</button>
          <button className="flex-1 btn-yellow" onClick={onSubmit}>Hapus</button>
        </div>
      </div>
    </>
  );
};

export default ConfirmAlert;