// axi0 Motion 0.2.0: Ring text. The letters sit around a circle that turns slowly; hovering speeds it up, slows it, pauses it or sends it spinning.
// Generated from src/ring-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 RingTextProps extends HTMLAttributes<HTMLElement> {
  /** Time per turn (default 18) */
  spin?: number;
  /** On hover (default "fast") */
  hover?: "fast" | "slow" | "pause" | "wild" | "none";
  /** Direction (default "cw") */
  direction?: "cw" | "ccw";
  /** Ring size (0 fits the text) (default 0) */
  size?: number;
  /** The element to render (default "div") */
  as?: string;
  children?: ReactNode;
}

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

export function RingText({ as = "div", spin, hover, direction, size, ...rest }: RingTextProps) {
  return createElement(as, { ...rest, "data-motion": "ring-text", "data-motion-spin": s(spin), "data-motion-hover": s(hover), "data-motion-direction": s(direction), "data-motion-size": s(size) });
}

export default RingText;