import { Alert, Snackbar, Stack } from '@mui/material'
import { useToastStore } from '../../stores/toastStore'

export function ToastProvider() {
  const { toasts, dismissToast } = useToastStore()

  return (
    <Stack
      spacing={1}
      sx={{ position: 'fixed', bottom: 24, left: '50%', transform: 'translateX(-50%)', zIndex: 9999, alignItems: 'center' }}
    >
      {toasts.map((toast) => (
        <Snackbar
          key={toast.id}
          open
          autoHideDuration={toast.duration ?? 4000}
          onClose={() => dismissToast(toast.id)}
          anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
          sx={{ position: 'relative', transform: 'none', left: 'auto', bottom: 'auto' }}
        >
          <Alert
            onClose={() => dismissToast(toast.id)}
            severity={toast.severity}
            variant="filled"
            sx={{ minWidth: 320, boxShadow: 3 }}
          >
            {toast.message}
          </Alert>
        </Snackbar>
      ))}
    </Stack>
  )
}