import { useEffect } from "react";
import { createPortal } from "react-dom";
import { useUiStore } from "../store/uiStore";

export function ToastViewport() {
  const message = useUiStore((s) => s.toastMessage);
  const clearToast = useUiStore((s) => s.clearToast);

  useEffect(() => {
    if (!message) {
      return;
    }
    const timer = window.setTimeout(() => clearToast(), 2200);
    return () => window.clearTimeout(timer);
  }, [message, clearToast]);

  if (!message) {
    return null;
  }

  return createPortal(
    <div className="pointer-events-none fixed bottom-3 left-0 right-0 z-[300] flex justify-center px-3">
      <div className="rounded-lg border border-slate-700/80 bg-slate-900/95 px-3 py-2 text-xs text-slate-100 shadow-xl">
        {message}
      </div>
    </div>,
    document.body
  );
}