import { Alert, Snackbar, type AlertColor } from '@mui/material';
import { type PropsWithChildren } from 'react';

export interface ToastProps extends PropsWithChildren {
  color: AlertColor | undefined;
  open: boolean;
  onClose: () => void;
}

export const Toast = ({ color, open, onClose, children }: ToastProps) => {
  return (
    <Snackbar
      sx={{ width: (t) => `calc(100% - ${t.spacing(6)})`, maxWidth: '396px' }}
      open={open}
      onClose={onClose}
    >
      <Alert
        onClose={onClose}
        severity={color}
        variant="filled"
        sx={{ width: '100%' }}
      >
        {children}
      </Alert>
    </Snackbar>
  );
};