"use client";

import { useApiStore } from "@/store/uiStore";

export default function AppToasts() {
  const { toasts, removeToast } = useApiStore((s) => ({
    toasts: s.toasts,
    removeToast: s.removeToast
  }));

  return (
    <div className="toast-stack">
      {toasts.map((toast) => (
        <div key={toast.id} className={`toast show align-items-center border-0 ${toastClass(toast.type)}`}>
          <div className="d-flex">
            <div className="toast-body text-white">{toast.message}</div>
            <button
              className="btn btn-sm btn-link text-white"
              onClick={() => removeToast(toast.id)}
              aria-label="dismiss"
            >
              ×
            </button>
          </div>
        </div>
      ))}
    </div>
  );
}

function toastClass(type: "success" | "error" | "info") {
  if (type === "success") return "bg-success text-white";
  if (type === "error") return "bg-danger text-white";
  return "bg-info text-white";
}