import { Alert, AlertColor, Snackbar, SnackbarOrigin } from '@mui/material'
import React from 'react'

interface ISnackbarAlertProps {
  isOpen: boolean;
  message: string;
  type: AlertColor;
  position?: SnackbarOrigin;
  autoHideDuration?: number;
  variant?: 'filled' | 'standard' | 'outlined';

  onClose: () => void;
}

const SnackbarAlert = ({
  isOpen,
  message,
  type,
  position,
  autoHideDuration = 3000,
  variant,
  onClose,
}: ISnackbarAlertProps) => (
  <div className="snackbar-alert-container">
    <Snackbar
      autoHideDuration={autoHideDuration}
      open={isOpen}
      anchorOrigin={position || { vertical: 'top', horizontal: 'center' }}
      onClose={onClose}
      classes={{
        root: 'snackbar-alert-snackbar-root',
      }}
    >
      <Alert
        severity={type}
        onClose={onClose}
        variant={variant || 'filled'}
        classes={{
          icon: 'snackbar-alert-icon',
          root: 'snackbar-alert-alert-root',
          action: 'snackbar-alert-action',
          message: 'snackbar-alert-message',
          filled: 'snackbar-alert-filled',
        }}
      >
        {message}
      </Alert>
    </Snackbar>
  </div>
)

export default SnackbarAlert