---
export const prerender = true
import { render } from "astro:content"
import { langs } from "~/i18n/ui"
import { getLangFromUrl } from "~/i18n/utils"
import MainLayout from "~/layouts/main.astro"
import "~/styles/post.css"
import "~/styles/post.scss"
import { formatDate, getPostsByLocale } from "~/utils"

export async function getStaticPaths() {
  const allPaths = []

  for (const lang of langs) {
    const posts = await getPostsByLocale(lang)
    const paths = posts.map((post: any) => ({
      params: { lang, slug: post.id },
      props: { post },
    }))
    allPaths.push(...paths)
  }

  return allPaths
}

const lang = getLangFromUrl(Astro.url)

const { post } = Astro.props

const { Content } = await render(post)
---

<MainLayout post={{ ...post.data }}>
  <article class="prose dark:prose-invert w-full max-w-3xl overflow-hidden">
    <div class="flex flex-col gap-2">
      <h2 class="my-0! text-3xl font-semibold">{post.data.title}</h2>
      <p class="my-0! text-md text-gray-700 dark:text-white/80">
        {post.data.description}
      </p>
      <div class="text-sm text-gray-500 dark:text-white/80">
        {formatDate(post.data.pubDate, "locale", lang)}
      </div>
    </div>

    <div class="my-6">
      <Content />
    </div>

    <div class="space-x-3 pb-10 text-sm text-gray-500">
      {
        post.data.tags.map((tag: string) => (
          <a href={`/${lang}/tags/${tag}`} class="no-underline">
            <p class="inline-block hover:scale-105 bg-amber-500 dark:bg-amber-400 dark:text-black p-1">#{tag}</p>
          </a>
        ))
      }
    </div>
  </article>
</MainLayout>