import React from 'react';
import { Alert, Snackbar } from '@mui/material';
import { useAppDispatch, useAppSelector } from '../hooks';
import { hideSnackbar, selectUIState } from '../slices/uiSlice';

function GlobalSnackbar() {
  const dispatch = useAppDispatch();
  const { snackbarOpen, message, severity } = useAppSelector(selectUIState);

  const handleClose = () => {
    dispatch(hideSnackbar());
  };

  return (
    <Snackbar open={snackbarOpen} onClose={handleClose} autoHideDuration={5000}>
      <div>
        <Alert severity={severity} onClose={handleClose}>
          {message}
        </Alert>
      </div>
    </Snackbar>
  );
}

export default GlobalSnackbar;