// axi0 Motion 0.2.0: Odometer. Every digit rolls on its own wheel to each new value, on raised digit tiles, in the page's locale with separators and currency.
// Generated from src/odometer/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 OdometerProps extends HTMLAttributes<HTMLElement> {
  /** Value to show (empty reads the page's number) (default auto) */
  value?: string;
  /** Add the step this often (0 = never) (default 0) */
  every?: number;
  /** Step (default 1) */
  step?: number;
  /** Decimals (-1 keeps the page's) (default -1) */
  decimals?: number;
  /** Currency code, like USD or EUR (default auto) */
  currency?: string;
  /** Locale (empty uses the page's language) (default auto) */
  locale?: string;
  /** Roll time (default 1100) */
  duration?: number;
  /** Set each digit on its own raised tile (default true) */
  tiles?: boolean;
  /** The element to render (default "div") */
  as?: string;
  children?: ReactNode;
}

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

export function Odometer({ as = "div", value, every, step, decimals, currency, locale, duration, tiles, ...rest }: OdometerProps) {
  return createElement(as, { ...rest, "data-motion": "odometer", "data-motion-value": s(value), "data-motion-every": s(every), "data-motion-step": s(step), "data-motion-decimals": s(decimals), "data-motion-currency": s(currency), "data-motion-locale": s(locale), "data-motion-duration": s(duration), "data-motion-tiles": s(tiles) });
}

export default Odometer;