import { memo } from 'react';

import type { AlertProps } from '../alert';
import { SnackbarAlert } from '../snackbar-alert';
import type { SnackbarAlertProps } from '../snackbar-alert';

export interface ToasterProps extends SnackbarAlertProps {
  /**
   * The severity of the alert. This defines the color used.
   */
  severity?: AlertProps['severity'];
  /**
   * Props which will be forwarded into the Alert component. More info at https://mui.com/api/alert/
   */
  alertProps?: AlertProps;
}

const Toaster = (props: ToasterProps) => {
  const { severity, children, onClose, alertProps, ...snackbarProps } = props;

  return (
    <SnackbarAlert
      children={children}
      onClose={onClose}
      alertProps={{
        variant: 'filled',
        ...alertProps,
        severity,
        onClose: onClose as AlertProps['onClose']
      }}
      {...snackbarProps}
    />
  );
};

Toaster.defaultProps = {
  severity: 'info',
  alertProps: {}
};

const m = memo(Toaster);
export { m as Toaster };