---
import { Container, panda, Stack } from '../../styled-system/jsx'
import '../../styled-system/styles.css'
import SideNav from '../components/side-nav.astro'
import ThemeToggle from '../components/theme-toggle.astro'
import { ThemeSelector } from '../components/theme-selector'
import { Logo } from '../icons/logo'

interface Props {
  title: string
}

const { title } = Astro.props
---

<panda.main display="flex" height="calc(100vh - env(safe-area-inset-bottom))">
  <Stack height="full" minW="60" overflow="auto" px="12" py="8">
    <panda.a aria-label="Token documentation" fontWeight="bold" fontSize="2xl" href="/" display="flex" gap="2">
      <Logo />
    </panda.a>
    <panda.div mt="4">
      <ThemeToggle />
    </panda.div>
    <panda.div mt="4">
      <ThemeSelector client:load />
    </panda.div>
    <SideNav />
  </Stack>

  <Container width="full" overflow="auto" pb="10">
    <panda.div px="4" pt="10" pb="8">
      <panda.h1 fontSize="3xl" fontWeight="semibold" mb="8" letterSpacing="tight">
        {title}
      </panda.h1>
      <slot />
    </panda.div>
  </Container>
</panda.main>