// axi0 Motion 0.2.0: Toast. Short messages that stack in a corner, burn a thin fuse for the time they have left, spread out under the pointer and swipe away.
// Generated from src/toast/meta.json by motion-pack: a thin wrapper. The loader (motion.js) must be on the page once;
// it starts the effect on the element this renders. Options left out keep the effect's own defaults.
import { createElement } from "react";
import type { HTMLAttributes, ReactNode } from "react";

export interface ToastProps extends HTMLAttributes<HTMLElement> {
  /** the message (default "Saved") */
  text?: string;
  /** a bold first line (optional) (default auto) */
  title?: string;
  /** the icon and color; error toasts are read at once (default "info") */
  tone?: "info" | "success" | "error";
  /** a button inside the toast, such as Undo (it fires a toast-action event on the trigger) (default auto) */
  action?: string;
  /** how long it stays; 0 keeps it until it is closed (default 6000) */
  duration?: number;
  /** stack the toasts at the bottom of the trigger's parent instead of the page (default false) */
  inline?: boolean;
  /** raise one toast as soon as the trigger comes into view (default false) */
  show?: boolean;
  /** The element to render (default "div") */
  as?: string;
  children?: ReactNode;
}

const s = (v: unknown) => (v === undefined ? undefined : String(v));

export function Toast({ as = "div", text, title, tone, action, duration, inline, show, ...rest }: ToastProps) {
  return createElement(as, { ...rest, "data-motion": "toast", "data-motion-text": s(text), "data-motion-title": s(title), "data-motion-tone": s(tone), "data-motion-action": s(action), "data-motion-duration": s(duration), "data-motion-inline": s(inline), "data-motion-show": s(show) });
}

export default Toast;