import { Toast } from '@/app/Toast';
import { useGlobalToastStore } from '@/stores/globalToast';

/** Mounted once at the app root (App.tsx) -- renders whatever `notify()` (globalToast.ts) most
 *  recently set. `key={token}` forces Toast to remount (not just re-render) so its own auto-dismiss
 *  timer restarts even when the exact same message is fired twice in a row, which a plain `message`
 *  string prop wouldn't detect as a change. */
export function GlobalToastRoot() {
  const message = useGlobalToastStore((s) => s.message);
  const variant = useGlobalToastStore((s) => s.variant);
  const token = useGlobalToastStore((s) => s.token);
  if (!message) return null;
  return <Toast key={token} message={message} variant={variant} onDone={() => useGlobalToastStore.setState({ message: '' })} />;
}