import type { ReactNode } from "react";

const noiseStyle = {
  backgroundImage: `url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E")`,
  backgroundSize: "128px 128px",
};

export default function DocsLayout({ children }: { children: ReactNode }) {
  return (
    <div className="min-h-screen bg-base text-white font-sans">
      <div className="fixed inset-0 opacity-[0.025] pointer-events-none z-0" style={noiseStyle} />
      <div
        className="fixed top-0 left-1/2 -translate-x-1/2 w-[800px] h-[500px] rounded-full blur-[160px] opacity-[0.06] pointer-events-none z-0"
        style={{ background: "radial-gradient(ellipse, var(--accent-glow), transparent)" }}
      />
      <div className="relative z-10 pt-16">
        {children}
      </div>
    </div>
  );
}