import { Outlet } from "react-router-dom"
import { Content, Header, Mask, Navbar, Shell } from "./clients"
import Effects from "./effects"
import { LayoutProvider } from "./layout-context"

export default function AdminLayout() {
  return (
    <LayoutProvider>
      <Effects />
      <div className="relative h-dvh overflow-hidden">
        <Shell>
          <div className="col-start-1 row-start-1 row-span-2 bg-card overflow-hidden relative z-20">
            <Navbar />
          </div>

          <div className="col-start-2 row-start-1 bg-card overflow-hidden relative z-20">
            <Header />
          </div>

          <svg
            className="col-start-2 row-start-2 w-full h-full z-20 pointer-events-none"
            preserveAspectRatio="none"
          >
            <defs>
              <mask id="top-left-rounded-mask">
                <rect width="100%" height="100%" fill="white" />
                <circle cx="16" cy="16" r="16" fill="black" />
                <rect x="16" y="0" width="100%" height="32" fill="black" />
                <rect x="0" y="16" width="32" height="100%" fill="black" />
                <rect x="16" y="16" width="100%" height="100%" fill="black" />
              </mask>
            </defs>
            <rect
              width="100%"
              height="100%"
              className="fill-card"
              mask="url(#top-left-rounded-mask)"
            />
          </svg>

          <Mask />
        </Shell>

        <Content>
          <Outlet />
        </Content>
      </div>
    </LayoutProvider>
  )
}