import { useSyncExternalStore } from "react";
import { dismiss, getToasts, subscribe } from "../lib/toast";

export default function Toaster() {
  const toasts = useSyncExternalStore(subscribe, getToasts, getToasts);
  return (
    <div className="fixed bottom-4 right-4 z-50 flex flex-col gap-2">
      {toasts.map((t) => (
        <div
          key={t.id}
          className="bg-surface border border-border rounded-xl shadow-2xl px-4 py-3 flex items-center gap-4 animate-[fadeIn_0.15s_ease]"
        >
          <span className="text-sm">{t.message}</span>
          {t.action && (
            <button
              onClick={() => {
                t.action!.onClick();
                dismiss(t.id);
              }}
              className="text-accent text-sm font-semibold hover:underline"
            >
              {t.action.label}
            </button>
          )}
        </div>
      ))}
    </div>
  );
}