// axi0 Motion 0.2.0: Curve marquee. The text runs without end along a curve, a gentle arc or a wave on a colored ribbon; drag it to fling it either way.
// Generated from src/curve-marquee/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 CurveMarqueeProps extends HTMLAttributes<HTMLElement> {
  /** Curve (default "arc") */
  shape?: "arc" | "wave";
  /** Depth of the curve (default 0.9) */
  depth?: number;
  /** Crests of a wave (default 2) */
  waves?: number;
  /** Speed (default 70) */
  speed?: number;
  /** Direction (default "left") */
  direction?: "left" | "right";
  /** Colored ribbon under the text (default false) */
  ribbon?: boolean;
  /** Ribbon color (default "#f6a04d") */
  color?: string;
  /** Text color on the ribbon (default "#111111") */
  ink?: string;
  /** Mark between copies (default "✦") */
  gap?: string;
  /** The element to render (default "div") */
  as?: string;
  children?: ReactNode;
}

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

export function CurveMarquee({ as = "div", shape, depth, waves, speed, direction, ribbon, color, ink, gap, ...rest }: CurveMarqueeProps) {
  return createElement(as, { ...rest, "data-motion": "curve-marquee", "data-motion-shape": s(shape), "data-motion-depth": s(depth), "data-motion-waves": s(waves), "data-motion-speed": s(speed), "data-motion-direction": s(direction), "data-motion-ribbon": s(ribbon), "data-motion-color": s(color), "data-motion-ink": s(ink), "data-motion-gap": s(gap) });
}

export default CurveMarquee;