// Toast that enters with ease-out ("pop" overshoots on a spring), exits with
// ease-in (anticipation swell for playful personalities) and unmounts only after
// the exit finishes. Re-showing mid-exit reverses smoothly.
import { useEffect, type ReactNode } from "react";
import { Presence } from "twelve-principles/react";

export interface ToastProps {
  open: boolean;
  onClose: () => void;
  /** Auto-close delay in ms. 0 disables. */
  autoCloseMs?: number;
  children: ReactNode;
}

export function Toast({ open, onClose, autoCloseMs = 3000, children }: ToastProps) {
  useEffect(() => {
    if (!open || autoCloseMs === 0) return;
    const id = setTimeout(onClose, autoCloseMs);
    return () => clearTimeout(id);
  }, [open, autoCloseMs, onClose]);

  return (
    <Presence show={open} enter="pop" exit="pop" role="status" aria-live="polite" className="toast">
      {children}
    </Presence>
  );
}