---
import Layout from "../layouts/Layout.astro"
import { Image } from "astro:assets"
import { getEntry } from "astro:content"
import BadgeList from "./badge/BadgeList.astro"
import ExternalLink from "./links/ExternalLink.astro"
import * as m from "../paraglide/messages"
import { languageTag } from "../paraglide/runtime"
import Gitea from "../icons/Gitea.astro"
import "../styles/global.css"
import GiteaLink from "./links/GiteaLink.astro"

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

const { project } = Astro.props

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

<!--TODO day.js 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} />

  <GiteaLink href={source} />

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