import { Alert, AlertTitle, Snackbar } from '@mui/material'
import type { LassoMessageUIProps } from './types'

/**
 * Presentational counterpart of `LassoTools.Message` (`@carto/ps-react-maps`),
 * positioned by that render-props component. Auto-hides after 5 seconds via
 * MUI `Snackbar` (calls `onDismiss`, which removes the message from the store).
 */
export function LassoMessageUI({
  message,
  onDismiss,
  AlertProps,
  SnackbarProps,
}: LassoMessageUIProps) {
  return (
    <Snackbar
      open
      autoHideDuration={5000}
      // 'clickaway' is ignored so map interactions don't dismiss the message.
      onClose={(_, reason) => reason !== 'clickaway' && onDismiss()}
      // Stay in flow — the maps-side `LassoTools.Message` owns positioning.
      sx={{ position: 'static', transform: 'none' }}
      {...SnackbarProps}
    >
      <Alert
        severity={message.severity ?? 'info'}
        action={message.action}
        onClose={onDismiss}
        {...AlertProps}
      >
        <AlertTitle>{message.title}</AlertTitle>
        {message.content}
      </Alert>
    </Snackbar>
  )
}