// axi0 Motion 0.2.0: Ghost trail. Outlined echoes of the text trail behind it, fainter the further back, and slide one after another into the word, on view, on hover and every few seconds.
// Generated from src/ghost-trail/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 GhostTrailProps extends HTMLAttributes<HTMLElement> {
  /** Plays on (default "both") */
  trigger?: "view" | "hover" | "both";
  /** Echo again after (0 = never) (default 3200) */
  every?: number;
  /** Trail side (default "left") */
  from?: "left" | "right" | "up" | "down";
  /** Echoes (default 5) */
  count?: number;
  /** Gap between echoes, in letter heights (default 0.3) */
  distance?: number;
  /** Time the echoes take to settle (default 1300) */
  duration?: number;
  /** Nearest echo (default "#f6a04d") */
  color?: string;
  /** Furthest echo (default "#ff5f8f") */
  color2?: string;
  /** The element to render (default "div") */
  as?: string;
  children?: ReactNode;
}

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

export function GhostTrail({ as = "div", trigger, every, from, count, distance, duration, color, color2, ...rest }: GhostTrailProps) {
  return createElement(as, { ...rest, "data-motion": "ghost-trail", "data-motion-trigger": s(trigger), "data-motion-every": s(every), "data-motion-from": s(from), "data-motion-count": s(count), "data-motion-distance": s(distance), "data-motion-duration": s(duration), "data-motion-color": s(color), "data-motion-color2": s(color2) });
}

export default GhostTrail;