import { getAllPosts } from "@/lib/blog";

export default function BlogIndex() {
  const posts = getAllPosts();

  return (
    <div className="pt-20">
      <section className="mx-auto max-w-3xl px-6 py-24">
        <p className="mb-4 font-mono text-xs uppercase tracking-widest text-accent">
          Notes
        </p>
        <h1 className="font-serif text-4xl font-bold leading-tight md:text-5xl">
          tidalDB Notes
        </h1>
        <p className="mt-4 text-lg text-muted">
          Engineering notes on building tidalDB — architecture decisions,
          implementation details, and benchmark results.
        </p>

        <div className="mt-16 space-y-12">
          {posts.length === 0 && (
            <p className="text-muted">No posts yet. Check back soon.</p>
          )}
          {posts.map((post) => (
            <article key={post.slug} className="group">
              <a href={`/blog/${post.slug}`} className="block">
                <time className="font-mono text-xs text-subtle">
                  {post.date}
                </time>
                <h2 className="mt-2 font-serif text-2xl font-bold leading-tight transition-colors group-hover:text-accent">
                  {post.title}
                </h2>
                <p className="mt-2 text-muted">{post.description}</p>
                {post.tags.length > 0 && (
                  <div className="mt-3 flex gap-2">
                    {post.tags.map((tag) => (
                      <span
                        key={tag}
                        className="rounded-full border border-border px-2.5 py-0.5 font-mono text-xs text-subtle"
                      >
                        {tag}
                      </span>
                    ))}
                  </div>
                )}
              </a>
            </article>
          ))}
        </div>
      </section>
    </div>
  );
}
