"use client";
import Snackbar, { SnackbarCloseReason } from "@mui/material/Snackbar";
import MaterialAlert from "@mui/material/Alert";
import { useAlert } from "@store/Alert.Store";

export default function Alert() {
    const alert = useAlert();
    const handleClose = (event?: React.SyntheticEvent | Event, reason?: SnackbarCloseReason) => {
        if (reason === "clickaway") {
            return;
        }

        alert.setVisible(false);
    };

    return (
        <>
            <Snackbar
                open={alert.visible}
                autoHideDuration={alert.hiddingTimeout}
                onClose={handleClose}
                sx={{ zIndex: 11000 }}
            >
                <MaterialAlert
                    onClose={handleClose}
                    severity={alert.mode}
                    variant="filled"
                    sx={{ width: "100%", marginBottom: "60px" }}
                >
                    {alert.message}
                </MaterialAlert>
            </Snackbar>
        </>
    );
}
