---
import BaseLayout from "./BaseLayout.astro";
import DocsHeader from "../components/DocsHeader.astro";
import Container from "../components/Container.astro";
import { getFormattedStars } from "../lib/github";
import Sidebar from "../components/Sidebar.astro";
import type { CollectionEntry } from "astro:content";

type GuideType = CollectionEntry<"guides">;

export interface Props {
  guide: GuideType;
}

const { guide } = Astro.props;
const { groupTitle, sort, title } = guide.data;
---

<BaseLayout title={title}>
  <DocsHeader />
  <div class="flex">
    <Sidebar activePath={`/docs/${guide.slug}`} />
    <div class="flex-1 px-2 py-6">
      <Container>
        <div class="prose lg:proxe-xl mb-24 prose-blockquote:font-normal prose-blockquote:not-italic prose-blockquote:text-gray-500 prose-p:before:content-['']">
          <slot />
        </div>
      </Container>
    </div>
  </div>
</BaseLayout>