import * as React from "react";
import Link from "next/link";
import { blogPosts } from "../../../src/data/blogPosts";
import { MediumCard } from "../../../src/components/MediumCard";
import { Reveal } from "../../../src/components/Reveal";

export async function generateStaticParams() {
  const allTags = Array.from(
    new Set(blogPosts.flatMap((post) => post.tags || [])),
  );
  return allTags.map((tag) => ({
    tag,
  }));
}

export default async function TagPage({
  params,
}: {
  params: Promise<{ tag: string }>;
}) {
  const { tag } = await params;
  const posts = blogPosts.filter((post) => post.tags?.includes(tag));

  return (
    <div className="max-w-3xl mx-auto px-4 py-8">
      <header className="mb-8">
        <Reveal>
          <h1 className="text-3xl font-bold text-slate-900 mb-2">
            Posts tagged{" "}
            <span className="highlighter-yellow px-2 rounded">{tag}</span>
          </h1>
        </Reveal>
        <Reveal delay={0.1}>
          <p className="text-slate-600">
            {posts.length} post{posts.length === 1 ? "" : "s"}
          </p>
        </Reveal>
      </header>

      <div className="space-y-4">
        {posts.map((post, i) => (
          <Reveal key={post.slug} delay={0.1 + i * 0.05} width="100%">
            <MediumCard post={post} />
          </Reveal>
        ))}
      </div>

      <Reveal delay={0.3}>
        <div className="mt-8 pt-6 border-t border-slate-200">
          <Link
            href="/blog"
            className="text-slate-600 hover:text-slate-900 inline-flex items-center"
          >
            ← Back to blog
          </Link>
        </div>
      </Reveal>
    </div>
  );
}
