import {ReactNode} from 'react'
import {Shell, Content, Header, Navbar, Mask} from './clients'

export default function Template(props: {
  children: ReactNode
}) {
  return (
    <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>
        {props.children}
      </Content>
    </div>
  )
}