---
import Layout from "./Layout.astro";
import TOC from "@components/TOC.astro";
import { useTranslatedPath, useTranslations } from "@i18n/utils";
import type { MarkdownLayoutProps } from "astro";

type Props = MarkdownLayoutProps<{
  title: string;
  date: Date;
  links?: string[][];
  toc?: boolean;
  cover?: string;
}>;

const { frontmatter, headings } = Astro.props;
const t = useTranslations(Astro.url);
const { title, url, date: dateString, links, toc, cover } = frontmatter;
const collection = url?.split("/")[2];
//@ts-ignore
const backlinkContent = t(`nav.${collection}`).toLowerCase();
const date = new Date(dateString);
const path = useTranslatedPath(Astro.url);
---

<Layout title={title} image={cover}>
  <div class="top-info flex items-center place-content-between m-y-2">
    <a class="flex items-center gap-1 opacity-50" href={path("/" + collection)}
      ><span class="i-tabler-arrow-left"></span>
      {backlinkContent}</a
    >

    {
      links?.length && (
        <div class="links flex gap-4">
          {links.map(([title, url]: string[]) => (
            <a href={url} class="flex external items-center gap-[4px]">
              {title}
              {title === "git" ? (
                <span class="i-tabler-brand-git w-4 h-4" />
              ) : (
                <span class="i-tabler-external-link w-4 h-3" />
              )}
            </a>
          ))}
        </div>
      )
    }

    <div class="date opacity-50">
      {
        date.toLocaleString("en-US", {
          month: "long",
          day: "numeric",
          year: "numeric",
        })
      }
    </div>
  </div>
  <article class={`flex flex-col gap-4 ${toc ? "show-toc" : ""}`}>
    <div class="flex flex-col gap-1">
      <h1 class="text-4xl">
        {title}
      </h1>
    </div>
    {toc && <TOC headings={headings} />}
    <slot />
  </article>
</Layout>

<style>
  article.layout-transparent {
    padding: 20px;
    background: var(--background);
  }

  article :global(picture) {
    border-radius: var(--border-radius-sm);
    overflow: hidden;
  }

  article :global(.toc-post) {
    display: none;
  }

  article.show-toc :global(.toc-post) {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
  }

  article :global(.toc-post > ol ol) {
    margin-left: 20px;
  }

  @media (min-width: 1200px) {
    :global(.toc-post) {
      position: fixed;
      top: 0;
      height: 80vh;
      left: 10px;
    }
  }
</style>