// axi0 Motion 0.2.0: Split text. Words, or letters, rise into place one after another the first time the text scrolls into view.
// Generated from src/split-text/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 SplitTextProps extends HTMLAttributes<HTMLElement> {
  /** `words` or `chars` (letters) (default "words") */
  split?: "words" | "chars";
  /** where each piece comes from (default "below") */
  from?: "below" | "above" | "blur" | "fade";
  /** milliseconds between pieces; 0 picks 70 for words, 28 for letters (default 0) */
  stagger?: number;
  /** milliseconds per piece (default 650) */
  duration?: number;
  /** milliseconds before the first piece (default 0) */
  delay?: number;
  /** The element to render (default "div") */
  as?: string;
  children?: ReactNode;
}

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

export function SplitText({ as = "div", split, from, stagger, duration, delay, ...rest }: SplitTextProps) {
  return createElement(as, { ...rest, "data-motion": "split-text", "data-motion-split": s(split), "data-motion-from": s(from), "data-motion-stagger": s(stagger), "data-motion-duration": s(duration), "data-motion-delay": s(delay) });
}

export default SplitText;