---
import type { CollectionEntry } from "astro:content";
import Layout from "./Layout.astro";
import { useTranslatedPath } from "@i18n/utils";

type CustomProps = {
  layout?: "normal" | "transparent";
  backlink?: string;
};
type Props = CollectionEntry<"blog">["data"] & CustomProps;

const { title, date, _layout, backlink = "/blog" } = Astro.props;
const path = useTranslatedPath(Astro.url);
---

<Layout title={title}>
  <div
    class="top-info flex items-center place-content-between opacity-50 m-y-4"
  >
    <a class="flex items-center gap-1" href={path(backlink)}
      ><span class="i-tabler-arrow-left"></span> overview</a
    >
    <div class="date">
      {
        date.toLocaleString("en-US", {
          month: "long",
          day: "numeric",
          year: "numeric",
        })
      }
    </div>
  </div>
  <article class={`layout-${_layout} flex flex-col gap-2`}>
    <h1 class="text-4xl my-4">{title}</h1>
    <slot />
  </article>
</Layout>

<style>
  article :global(h2) {
    @apply text-3xl;
  }

  article :global(h3) {
    @apply text-2xl;
  }

  article :global(h4) {
    @apply text-xl;
  }

  article :global(img) {
    border-radius: 0.5rem;
  }

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