---
import * as m from "@/paraglide/messages"
import Layout from "@/layouts/Layout.astro"
import BadgeList from "@/components/badge/BadgeList.astro"
import GiteaLink from "@/components/links/GiteaLink.astro"
import { languageTag } from "@/paraglide/runtime"
import { getEntry, render } from "astro:content"
import { Image } from "astro:assets"
import dayjs from "dayjs"
import "@/styles/global.css"

interface Props {
  project: string // TODO typeof project slug
}

const { project } = Astro.props

const entry = await getEntry("projects", project)
const { Content } = await render(entry!)
const {
  lang,
  title,
  description,
  tags,
  keywords,
  heroImage,
  heroImageAlt,
  source,
  createdAt,
  updatedAt,
} = entry!.data

function localeDateString(isoString: string): string {
  if (languageTag() === "nb") {
    return dayjs(isoString).locale(languageTag()).format("DD/MM/YYYY")
  }
  return dayjs(isoString).locale(languageTag()).format("DD-MM-YYYY")
}
---

<Layout
  title={title}
  class="mx-auto max-w-[750px]"
  description={description}
  keywords={keywords}
>
  <div class="flex justify-between my-2">
    <div>
      <h2>{title}</h2>
      <BadgeList tags={tags} />
    </div>
    <div class="flex flex-col items-end">
      <p>
        {m.createdAt()}: {localeDateString(createdAt)}
      </p>
      <p>
        {m.updatedAt()}: {localeDateString(updatedAt)}
      </p>
    </div>
  </div>
  <Image src={heroImage} alt={heroImageAlt} class="m-auto" />

  <GiteaLink href={source} class="my-2" />

  <p class="my-2">{description}</p>
  <div lang={lang}>
    <Content />
  </div>
</Layout>