GlassFrame

import type { ReactNode } from "react";

type GlassFrameProps = {
  children: ReactNode;
  className?: string;
  /** Blur of what sits behind the card, in pixels. */
  blur?: number;
  /** Glass colour. Keep it see-through. */
  tint?: string;
};

/* GlassFrame: frosted glass over whatever is behind it. A sheen passes across on hover. */
export function GlassFrame({
  children,
  className = "rounded-2xl p-6 text-white",
  blur = 16,
  tint = "rgba(255,255,255,0.08)",
}: GlassFrameProps) {
  const filter = `blur(${blur}px) saturate(1.4)`;

  return (
    <div
      className={`group relative overflow-hidden ${className}`}
      style={{
        background: tint,
        backdropFilter: filter,
        WebkitBackdropFilter: filter,
        boxShadow:
          "inset 0 1px 0 rgba(255,255,255,0.25), inset 0 0 0 1px rgba(255,255,255,0.12), 0 24px 48px -24px rgba(0,0,0,0.6)",
      }}
    >
      <span
        aria-hidden
        className="pointer-events-none absolute inset-y-0 -left-1/2 w-1/2 -skew-x-12 bg-gradient-to-r from-transparent via-white/20 to-transparent opacity-0 transition-[translate,opacity] duration-700 ease-out group-hover:translate-x-[320%] group-hover:opacity-100 motion-reduce:hidden"
      />
      <div className="relative">{children}</div>
    </div>
  );
}