---
import { getLangFromUrl, useTranslations } from "~/i18n/utils"
import MainLayout from "~/layouts/main.astro"
import PostList from "./post-list.astro"

interface Props {
  posts: any[]
  tag: string
}

const { posts, tag } = Astro.props

const lang = getLangFromUrl(Astro.url)
const t = useTranslations(lang)

const filteredPosts = posts.filter((post: any) => post.data.tags?.includes(tag))
---

<MainLayout>
  <div class="relative z-10">
    <div class="my-9 mt-2 text-2xl font-semibold">#{tag}</div>

    {
      filteredPosts.length > 0 ? (
        <ul class="space-y-4">
          {filteredPosts.map((post: any) => (
            <PostList
              post={post}
              lang={lang}
              dateFormat="YYYY-MM-DD"
              dateWidth="w-32"
            />
          ))}
        </ul>
      ) : (
        <p class="text-gray-500">{t("tag.no_posts")}</p>
      )
    }
  </div>
</MainLayout>
