---
import DocSideBar from "~/components/navigation/DocSideBar.astro";
import Breadcrumbs from "~/modules/docs/Breadcrumbs.astro";
import TableOfContents from "~/modules/docs/TableOfContents.astro";

interface PageHeadings {
  depth: number;
  slug: string;
  text: string;
}

// interface Chip {
//   label: string;
//   href: string;
//   icon?: string;
//   preset?: string;
// }

interface Props {
  frontmatter: {
    // Required ---
    title: string;
    description: string;
  };
  headings: PageHeadings[];
}

const { frontmatter, headings } = Astro.props;

// GitHub Settings
// const branch = "website";
// URLs
// const urls = {
//   githubDocsUrl: `https://github.com/KRTirtho/spotube/tree/${branch}/website/src/content`,
//   githubSpotubeUrl: `https://github.com/KRTirtho/spotube`,
// };
---

<div
  class="container mx-auto grid grid-cols-1 xl:grid-cols-[240px_minmax(0px,_1fr)_280px] px-4 xl:px-10"
>
  <!-- Navigation -->
  <aside
    class="hidden xl:block self-start sticky top-[70px] h-[calc(100vh-70px)] py-4 xl:py-10 overflow-y-auto pr-10"
    data-navigation
  >
    <DocSideBar />
  </aside>
  <!-- Main -->
  <main
    class="px-4 xl:px-10 py-10 space-y-8 [&_.scroll-header]:scroll-mt-[calc(70px+40px)]"
  >
    <!-- Header -->
    <header class="scroll-header space-y-4" data-pagefind-body id="_top">
      <!-- Breadcrumbs -->
      <Breadcrumbs />
      <h1 class="h1">{frontmatter.title ?? "(title)"}</h1>
      <p class="text-lg opacity-60">
        {frontmatter.description ?? "(description)"}
      </p>
    </header>
    <!-- Content -->
    <article class="space-y-8" data-pagefind-body>
      <slot />
    </article>
    <!-- Footer -->
    <!-- <Footer classList="py-4 px-4 xl:px-0" /> -->
  </main>
  <!-- Sidebar -->
  <aside
    class="hidden xl:block self-start sticky top-[70px] h-[calc(100vh-70px)] py-4 xl:py-10 space-y-8 overflow-y-auto"
  >
    <!-- Carbon Ads -->
    <script
      is:inline
      async
      type="text/javascript"
      src="//cdn.carbonads.com/carbon.js?serve=CWYD627U&placement=carbonadsnet"
      id="_carbonads_js"></script>
    <!-- Table of Contents -->
    <TableOfContents {headings} />
    <!-- Promot -->
    <!-- <div class="card aspect-video flex justify-center items-center preset-tonal">(promo)</div> -->
  </aside>
</div>