import Snackbar from "@mui/material/Snackbar";
import MuiAlert from "@mui/material/Alert";
import { useAlertState } from "../context/AlertContext";

export default function AlertContainer() {
  const { alerts, removeAlert } = useAlertState();

  return (
    <>
      {alerts.map((alert, index) => (
        <Snackbar
          key={alert.id}
          open
          anchorOrigin={{ vertical: "bottom", horizontal: "right" }}
          // Offset each stacked toast by its position in the list. Applied at
          // every breakpoint (not just xs) so larger screens don't fall back to
          // MUI's default bottom position and overlap with 3+ alerts.
          sx={{ bottom: 16 + index * 72 }}
        >
          <MuiAlert
            severity={alert.type}
            onClose={() => removeAlert(alert.id)}
            variant="filled"
            sx={{ width: "100%", minWidth: 280 }}
          >
            {alert.message}
          </MuiAlert>
        </Snackbar>
      ))}
    </>
  );
}