import { jsx as _jsx } from "react/jsx-runtime";
import React from "react";
import { useSnackbarState, useSnackbar } from "../../contexts/SnackbarContext";
import { Snackbar } from "./Snackbar";
export const SnackbarContainer = ({ position = "top-right", maxSnackbars = 5, }) => {
    const snackbars = useSnackbarState();
    const { removeSnackbar } = useSnackbar();
    // Limitar el número de snackbars visibles
    const visibleSnackbars = snackbars.slice(-maxSnackbars);
    // Clases de posición
    const positionClasses = {
        "top-right": "top-4 right-4",
        "top-left": "top-4 left-4",
        "bottom-right": "bottom-4 right-4",
        "bottom-left": "bottom-4 left-4",
        "top-center": "top-4 left-1/2 -translate-x-1/2",
        "bottom-center": "bottom-4 left-1/2 -translate-x-1/2",
    };
    if (snackbars.length === 0) {
        return null;
    }
    return (_jsx("div", { className: `
        fixed z-50 pointer-events-none
        ${positionClasses[position]}
      `, "aria-live": "polite", "aria-atomic": "true", children: _jsx("div", { className: "flex flex-col gap-3 pointer-events-auto", children: visibleSnackbars.map((snackbar) => (_jsx(Snackbar, { id: snackbar.id, message: snackbar.message, variant: snackbar.variant, duration: snackbar.duration, icon: snackbar.icon, iconLabel: snackbar.iconLabel, onClose: removeSnackbar }, snackbar.id))) }) }));
};
