import React from "react";
import { Alert, AlertDescription, AlertTitle } from "./Alert";
import { useUiStore } from "../../store/useUiStore";

export const AlertToastStack = () => {
  const alerts = useUiStore((s) => s.alerts);

  if (alerts.length === 0) {
    return null;
  }

  return (
    <div className="toast-stack">
      {alerts.map((alert) => (
        <Alert key={alert.id} variant={alert.variant}>
          <AlertTitle>{alert.title}</AlertTitle>
          {alert.description ? (
            <AlertDescription>{alert.description}</AlertDescription>
          ) : null}
        </Alert>
      ))}
    </div>
  );
};
