// axi0 Motion 0.2.0: Glass pane. Liquid glass over whatever sits behind it: the backdrop bends at the rim the way a thick pane refracts it, with a soft frost, a bright edge and a sheen under the pointer.
// Generated from src/glass-pane/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 GlassPaneProps extends HTMLAttributes<HTMLElement> {
  /** corner radius; 999 makes a pill (default 999) */
  radius?: number;
  /** how far the rim pulls the backdrop (default 36) */
  bend?: number;
  /** how wide the bending rim is (default 18) */
  rim?: number;
  /** blur of the backdrop (default 2) */
  frost?: number;
  /** The element to render (default "div") */
  as?: string;
  children?: ReactNode;
}

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

export function GlassPane({ as = "div", radius, bend, rim, frost, ...rest }: GlassPaneProps) {
  return createElement(as, { ...rest, "data-motion": "glass-pane", "data-motion-radius": s(radius), "data-motion-bend": s(bend), "data-motion-rim": s(rim), "data-motion-frost": s(frost) });
}

export default GlassPane;