import Alert from '@mui/material/Alert';
import Box from '@mui/material/Box';
import Snackbar from '@mui/material/Snackbar';
import { useDispatch, useSelector } from 'react-redux';
import { dispatchAlert } from '../redux/Actions/ProvidersAction';
import { setAlert } from '../redux/features/providers/providersSlice';

const AlertComponent = () => {
	const { alert } = useSelector(state => state.providers);
	const dispatch = useDispatch();

	const handleClose = (event, reason) => {
		if (reason === 'clickaway') return;
		dispatch(setAlert(dispatchAlert(false, '', '')));
	};

	return (
		<Box sx={{ display: 'flex', justifyContent: 'center' }} width={500}>
			<Snackbar
				open={alert.showAlert}
				anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
				autoHideDuration={alert.alertDuration || 5000}
				onClose={handleClose}>
				<Alert
					onClose={handleClose}
					severity={alert.alertType}
					variant='filled'
					sx={{ width: '100%' }}>
					{alert.alertMsg}
				</Alert>
			</Snackbar>
		</Box>
	);
};

export default AlertComponent;