import { Dispatch, SetStateAction } from "react";
import "./assets/css/styles.css";

// Interface defining the props for the ConfirmationDialog component
interface props {
  handleToClose: () => void; // Function to handle closing the dialog
  setAnswer?: Dispatch<SetStateAction<boolean>>; // Optional function to set the user's answer
  title?: string; // Optional title for the dialog
  message: string; // Message to be displayed in the dialog
}

// ConfirmationDialog component definition
export const ConfirmationDialog = ({
  handleToClose,
  setAnswer,
  title,
  message,
}: props) => {
  return (
    <div className="confirmation_dialog_wrap">
      {/* Dialog header */}
      <div className="header">
        <h3>{title || "Confirmar acción"}</h3> {/* Default title if none is provided */}
      </div>
      
      {/* Dialog body */}
      <div className="body">
        <div className="content">
          <p>{message}</p> {/* Display the message */}
        </div>

        {/* Dialog buttons */}
        <div className="buttons">
          <button
            onClick={() => {
              if (setAnswer) {
                setAnswer(true); // Set answer to true if setAnswer is provided
              }
              handleToClose(); // Close the dialog
            }}
          >
            Sí
          </button>
          <button
            onClick={() => {
              if (setAnswer) {
                setAnswer(false); // Set answer to false if setAnswer is provided
              }
              handleToClose(); // Close the dialog
            }}
          >
            No
          </button>
        </div>
      </div>
    </div>
  );
};
