---
import Layout from "../../../layouts/Layout.astro";
import Section from "../../../components/Section.astro";
import PostList from "../../../components/PostList.astro";
import { getPosts, allTags } from "../../../lib/blog";
import type { GetStaticPaths } from "astro";

export const getStaticPaths = (async () => {
  const posts = await getPosts();
  const tags = allTags(posts);
  return tags.map((tag) => ({
    params: { tag },
    props: { tag, posts: posts.filter((p) => p.data.tags.includes(tag)) },
  }));
}) satisfies GetStaticPaths;

const { tag, posts } = Astro.props;
---

<Layout title={`#${tag}`} path={`/blog/tags/${tag}/`} description={`Posts tagged ${tag}.`}>
  <Section id="tag" eyebrow="Tag" index="#" title={`Posts tagged "${tag}"`}>
    <p class="tag-page__back" data-reveal>
      <a class="btn" href="/blog/">← All posts</a>
    </p>
    <PostList posts={posts} />
  </Section>
</Layout>

<style>
  .tag-page__back {
    margin-bottom: var(--space-6);
  }
</style>
