---
import BaseLayout from "../../layouts/BaseLayout.astro";
import Breadcrumbs from "../../components/Breadcrumbs.astro";
import PostCard from "../../components/PostCard.astro";
import { SITE, tags, postsByTag } from "../../lib/blog-data.js";

export function getStaticPaths() {
  return tags.map((tag) => ({ params: { slug: tag.slug }, props: { tag } }));
}

const { tag } = Astro.props;
const list = await postsByTag(tag.slug);
---

<BaseLayout
  title={`#${tag.name} - ${SITE.name}`}
  description={`All writing tagged ${tag.name}.`}
  canonical={`/tags/${tag.slug}`}
>
  <div class="mx-auto max-w-4xl px-5 py-12">
    <Breadcrumbs items={[{ label: "Home", to: "/" }, { label: "Tags" }, { label: `#${tag.name}` }]} />
    <header class="mt-6 border-b border-border pb-8">
      <div class="text-xs font-medium uppercase tracking-[0.2em] text-primary">Tag</div>
      <h1 class="mt-2 font-serif text-4xl font-semibold tracking-tight">#{tag.name}</h1>
      <p class="mt-3 text-muted-foreground">{list.length} {list.length === 1 ? "post" : "posts"}.</p>
    </header>

    {
      list.length === 0 ? (
        <div class="mt-12 rounded-md border border-dashed border-border py-20 text-center text-muted-foreground">
          Nothing tagged yet.
        </div>
      ) : (
        list.map((post) => <PostCard post={post} variant="list" />)
      )
    }
  </div>
</BaseLayout>
