---
import BaseLayout from "./BaseLayout.astro";
import { getTopicColor } from "../utils/colors.js";

interface Props {
  frontmatter: {
    title: string;
    description?: string;
    date?: string;
    useKatex?: boolean;
    useD3?: boolean;
    scripts?: string[];
    category?: string;
  };
  post?: {
    id?: string;
    collection?: string;
    slug?: string;
  };
}

const { frontmatter, post } = Astro.props as Props;
const { title, description, useKatex = false, useD3 = false } = frontmatter;

const filePath = post?.id ?? "";
const categoryFromId = (filePath.split("/")[0] ?? "").replace(
  /\.(mdx?|MDX?)$/,
  "",
);
const category =
  (frontmatter.category ?? post?.collection ?? categoryFromId) || "";

let documentTitle = title;
if (post?.collection === "git" && post?.slug) {
  documentTitle = `${post.slug}.git`;
} else if (
  (post?.collection === "gists" || post?.collection === "gist") &&
  post?.slug
) {
  documentTitle = `${post.slug}`;
}

const topicColor = getTopicColor(post.collection);
---

<BaseLayout title={documentTitle} description={description}>
  <Fragment slot="head">
    <link rel="stylesheet" href="/styles/posts.css" />
    <link rel="stylesheet" href="/styles/graph.css" />
    {
      useKatex && (
        <link
          rel="stylesheet"
          href="https://cdn.jsdelivr.net/npm/katex@0.16.22/dist/katex.min.css"
          integrity="sha384-5TcZemv2l/9On385z///+d7MSYlvIEw9FuZTIdZ14vJLqWphw7e7ZPuOiCHJcFCP"
          crossorigin="anonymous"
        />
      )
    }
    <slot name="head" />
  </Fragment>

  <div class="post-container" style={`--topic-color: ${topicColor};`}>
    <header class="post-header">
      <h1 class="post-title">{title}</h1>
      {frontmatter.date && <p class="post-meta">{frontmatter.date}</p>}
    </header>

    <article class="post-article">
      <slot />
    </article>
  </div>

  <Fragment slot="scripts">
    <script type="module" src="/scripts/index.js"></script>
    <script src="/scripts/centerKatex.js" is:inline></script>
    {frontmatter.scripts?.map((src) => <script type="module" src={src} />)}
    <slot name="scripts" />
  </Fragment>
</BaseLayout>