// axi0 Motion 0.2.0: Image trail. Pictures appear along the pointer's path and fade behind it, in four styles.
// Generated from src/image-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 ImageTrailProps extends HTMLAttributes<HTMLElement> {
  /** `fade`, `tilt`, `drift` or `zoom` (default "fade") */
  variant?: "fade" | "tilt" | "drift" | "zoom";
  /** picture width in pixels (default 170) */
  width?: number;
  /** pixels of pointer travel between pictures (default 70) */
  spacing?: number;
  /** milliseconds each picture lives (default 1000) */
  duration?: number;
  /** The element to render (default "div") */
  as?: string;
  children?: ReactNode;
}

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

export function ImageTrail({ as = "div", variant, width, spacing, duration, ...rest }: ImageTrailProps) {
  return createElement(as, { ...rest, "data-motion": "image-trail", "data-motion-variant": s(variant), "data-motion-width": s(width), "data-motion-spacing": s(spacing), "data-motion-duration": s(duration) });
}

export default ImageTrail;