export function GlassBox({
  children,
  className = "",
  frostSrc,
}: {
  children: React.ReactNode;
  className?: string;
  frostSrc: string;
}) {
  return (
    <div
      className={`glass-box overflow-hidden ${className}`}
      style={{
        WebkitBackdropFilter: "blur(18px) saturate(160%)",
        backdropFilter: "blur(18px) saturate(160%)",
      }}
    >
      <span
        aria-hidden
        className="pointer-events-none absolute inset-0 scale-125 bg-cover bg-center"
        style={{
          backgroundImage: `url("${frostSrc}")`,
          filter: "blur(18px)",
        }}
      />
      <span className="pointer-events-none absolute inset-0 bg-white/30" />
      <div className="relative z-10">{children}</div>
    </div>
  );
}