"use client";

import { CheckCircle, WarningCircle } from "@phosphor-icons/react/ssr";
import { useConfigToasts } from "@/lib/ws/client";

export function ToastStack() {
  const toasts = useConfigToasts();

  if (toasts.length === 0) return null;

  return (
    <div className="fixed right-6 bottom-6 z-50 flex flex-col gap-2">
      {toasts.map((toast) => (
        <div
          key={toast.id}
          className="pn-toast flex max-w-[340px] items-center gap-2.5 rounded-lg border border-border bg-surface px-3.5 py-3 shadow-[var(--pn-shadow-md)]"
        >
          {toast.tone === "ok" ? (
            <CheckCircle size={20} className="shrink-0 text-accent" aria-hidden />
          ) : (
            <WarningCircle size={20} className="shrink-0 text-status-down" aria-hidden />
          )}
          <span className="text-[13px] text-fg">{toast.message}</span>
        </div>
      ))}
    </div>
  );
}