import React, { useState } from "react";
import styles from "./styles.module.css";
import BoxedCheckIcon from "../icons/boxedCheck";
import SecondaryButton from "../buttons/secondaryButton/SecondaryButton";
import PrimaryButton from "../buttons/primarybutton/PrimaryButton";
const Alert = (props) => {
  const [hide, setHide] = useState(false);
  const body = props?.body;
  const handleHide = () => {
    setHide(true);
    setTimeout(() => {
      props.setTriggerAlert(false);
    }, 250);
  };

  const handleConfirm = () => {
    setHide(true);
    setTimeout(() => {
      props.setTriggerAlert(false);
      props?.setEditState(false);
    }, 250);
  };
  return (
    <div className={styles.container}>
      <div
        className={`${styles.alertContainer} ${hide ? styles.hide : styles.show}`}
      >
        <div className={styles.headers}>
          <div className={styles.iconContainer}>
            <BoxedCheckIcon />
          </div>
          <p>{props.title}</p>
        </div>
        <div className={styles.alertBody}>
          <p>
            {body ||
              " You are about to add a new record. Please review the details before continuing. Do you want to proceed?"}
          </p>
        </div>
        <div className={styles.actionButtons}>
          <PrimaryButton text="Confirm" onClick={handleConfirm} />
          <SecondaryButton text="Cancel" onClick={handleHide} />
        </div>
      </div>
    </div>
  );
};

export default Alert;
