---
import Layout from "@/layouts/Layout.astro"
import { Image } from "astro:assets"
import { getEntry, render } from "astro:content"
import BadgeList from "@/components/badge/BadgeList.astro"
import * as m from "@/paraglide/messages"
import { languageTag } from "@/paraglide/runtime"
import GiteaLink from "@/components/links/GiteaLink.astro"
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 {
  title,
  description,
  tags,
  heroImage,
  heroImageAlt,
  source,
  createdAt,
  updatedAt,
} = entry!.data
---

<!--TODO day.js / Temporal API for dates?-->
<Layout title={title} class="mx-auto max-w-[750px]">
  <div class="flex justify-between my-2">
    <div>
      <h1>{title}</h1>
      <BadgeList tags={tags} />
    </div>
    <div class="flex flex-col items-end">
      <p>
        {m.createdAt()}: {new Date(createdAt).toLocaleDateString(languageTag())}
      </p>
      <p>
        {m.updatedAt()}: {new Date(updatedAt).toLocaleDateString(languageTag())}
      </p>
    </div>
  </div>
  <Image src={heroImage} alt={heroImageAlt} class="m-auto" />

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

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