// axi0 Motion 0.2.0: Flip board. A split-flap board: every tile clacks through the letters to the next phrase.
// Generated from src/flip-board/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 FlipBoardProps extends HTMLAttributes<HTMLElement> {
  /** More phrases, separated by | (default auto) */
  words?: string;
  /** Time on each phrase (default 3400) */
  interval?: number;
  /** Time per flip (default 75) */
  speed?: number;
  /** Most flips per change (default 12) */
  steps?: number;
  /** Delay between tiles (default 24) */
  stagger?: number;
  /** Tile color (default "#17171c") */
  tile?: string;
  /** Letter color (default "#f5f5f7") */
  ink?: string;
  /** The element to render (default "div") */
  as?: string;
  children?: ReactNode;
}

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

export function FlipBoard({ as = "div", words, interval, speed, steps, stagger, tile, ink, ...rest }: FlipBoardProps) {
  return createElement(as, { ...rest, "data-motion": "flip-board", "data-motion-words": s(words), "data-motion-interval": s(interval), "data-motion-speed": s(speed), "data-motion-steps": s(steps), "data-motion-stagger": s(stagger), "data-motion-tile": s(tile), "data-motion-ink": s(ink) });
}

export default FlipBoard;