import React, { useState } from "react";
import styles from "./styles.module.css";
import BoxedCheckIcon from "../icons/boxedCheck";
const Alert = (props) => {
  const [hide, setHide] = useState(false);
  const handleHide = () => {
    setHide(true);
    setTimeout(() => {
      props.setTriggerAlert(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>Create New Service</p>
        </div>
        <div className={styles.alertBody}>
          <p>
            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}>
          <button onClick={handleHide}>Confirm</button>
          <button onClick={handleHide}>Cancel</button>
        </div>
      </div>
    </div>
  );
};

export default Alert;