import "../Logout/logoutmodal.css";
/**
 * Component for displaying a logout confirmation modal.
 * @param {object} props - Component props.
 * @param {Function} props.setShowLogoutModal - Function to toggle the logout modal.
 * @param {boolean} props.showLogoutMOdal - Boolean indicating whether to show the logout modal.
 * @param {Function} props.handleSignOUt - Function to handle the logout action.
 * @returns {JSX.Element} - Rendered component.
 */
const LogoutModal = ({
  setShowLogoutModal,
  showLogoutMOdal,
  handleSignOUt,
}) => {
  return (
    <>
      <div
        className="logout_wrapper"
        onClick={() => setShowLogoutModal(!showLogoutMOdal)}
      >
        <div className="logout_modal">
          <div className="logout_heading">
            <ion-icon name="log-out-outline"></ion-icon>
          </div>
          <h1>Logout</h1>
          <h3> Are you sure you want to logout?</h3>
          <div className="button_div">
            <button
              className="log_btn cancle"
              onClick={() => setShowLogoutModal(!showLogoutMOdal)}
            >
              Cancel
            </button>
            <button
              className="log_btn logout"
              onClick={handleSignOUt}
            >
              Logout
            </button>
          </div>
        </div>
      </div>
    </>
  );
};

export default LogoutModal;