// axi0 Motion 0.2.0: RGB glitch. Red and cyan copies of the text tear across it in slices that never quite settle, with bursts every few seconds, like a signal breaking up.
// Generated from src/rgb-glitch/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 RgbGlitchProps extends HTMLAttributes<HTMLElement> {
  /** How fast the slices jump (default 1) */
  speed?: number;
  /** How far the slices tear and the colors split (default 1) */
  strength?: number;
  /** Glitch only under the pointer (default false) */
  hover?: boolean;
  /** Slices hide the text they cover (wear the background) (default true) */
  mask?: boolean;
  /** First copy (default "#ff2e63") */
  color1?: string;
  /** Second copy (default "#08d9d6") */
  color2?: string;
  /** The element to render (default "div") */
  as?: string;
  children?: ReactNode;
}

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

export function RgbGlitch({ as = "div", speed, strength, hover, mask, color1, color2, ...rest }: RgbGlitchProps) {
  return createElement(as, { ...rest, "data-motion": "rgb-glitch", "data-motion-speed": s(speed), "data-motion-strength": s(strength), "data-motion-hover": s(hover), "data-motion-mask": s(mask), "data-motion-color1": s(color1), "data-motion-color2": s(color2) });
}

export default RgbGlitch;