---
import { type CollectionEntry } from "astro:content";
import DocumentationLayout from "$layouts/DocumentationLayout.astro";
import ProseWrapper from "$layouts/ProseWrapper.astro";
import { getTitle, getSlug, hasSidebar } from "../content-utils";
import { config } from "../../config";
import SecondaryButton from "$components/buttons/SecondaryButton.astro";
import Footer from "$components/Footer.astro";
import ExternalLink from "$components/ExternalLink.astro";

type Props = {
  post: CollectionEntry<"docs">;
  next: CollectionEntry<"docs"> | null;
  previous: CollectionEntry<"docs"> | null;
  Content: any;
  headings: any;
  showFullLlms?: boolean;
};

const sidebar = await hasSidebar();

const { post, next, previous, Content, headings, showFullLlms } = Astro.props;

const pageLlmsUrl = `${config.BASE}/${getSlug(post)}/llms.txt`;
const fullLlmsUrl = `${config.BASE}/llms-full.txt`;
const isReadme = post.id.toLowerCase().replace(/\.mdx?$/, "") === "readme";
const showFull = showFullLlms || isReadme;
---

<DocumentationLayout
  {...post.data}
  title={getTitle(post) + (config.SITE_NAME ? " | " + config.SITE_NAME : "")}
  image={post.id + ".png"}
  id={post.id}
  headings={headings}
>
  <div
    class:list={[
      "max-w-2xl h-full p-4 mt-8 mb-16",
      sidebar ? "lg:max-w-4xl mx-auto" : "mx-auto",
    ]}
  >
    <div class="flex flex-wrap gap-2 justify-start mb-4 not-prose">
      <SecondaryButton
        href={pageLlmsUrl}
        title="This page as plain text for LLMs"
      >
        llms.txt
      </SecondaryButton>
      {
        showFull ? (
          <SecondaryButton
            href={fullLlmsUrl}
            title="Full documentation as plain text for LLMs"
          >
            llms-full.txt
          </SecondaryButton>
        ) : null
      }
    </div>

    <ProseWrapper class="min-h-[40vh]">
      <Content components={{ a: ExternalLink }} />
    </ProseWrapper>

    <div class="flex justify-between my-16">
      <div>
        {
          previous ? (
            <div class="flex flex-col gap-3 items-start">
              <SecondaryButton href={config.BASE + "/" + getSlug(previous)}>
                <span aria-hidden="true">&larr;</span>
                Previous
              </SecondaryButton>
              <a
                href={config.BASE + "/" + getSlug(previous)}
                class="text-lg dark:text-base-300 font-semibold"
              >
                {getTitle(previous)}
              </a>
            </div>
          ) : null
        }
      </div>

      <div class="text-right">
        {
          next ? (
            <div class="flex flex-col gap-3 items-end">
              <SecondaryButton href={config.BASE + "/" + getSlug(next)}>
                <span aria-hidden="true">&rarr;</span>
                Next
              </SecondaryButton>
              <a
                href={config.BASE + "/" + getSlug(next)}
                class="text-lg dark:text-base-300 font-semibold"
              >
                {getTitle(next)}
              </a>
            </div>
          ) : null
        }
      </div>
    </div>

    <Footer />
  </div>
</DocumentationLayout>