import { getPosts } from '@/lib/posts'
import { PostSearch } from '@/components/blog/PostSearch'

export const metadata = { title: 'Posts' }

export default async function PostsPage() {
  const posts = await getPosts()

  return (
    <main className="mx-auto max-w-5xl px-6 py-12 sm:py-16">
      <header className="mb-10 border-b border-border pb-8">
        <p className="mb-3 font-mono text-xs uppercase tracking-[0.24em] text-ink-soft">Archive</p>
        <h1 className="heading-xl m-0 text-ink">
          Posts
        </h1>
        <p className="mt-4 max-w-2xl text-sm leading-6 text-ink-soft sm:text-base">
          Browse every essay, note, and experiment in one place. Search and tag filters stay local and fast.
        </p>
      </header>

      {posts.length > 0 ? (
        <PostSearch posts={posts} />
      ) : (
        <section className="empty-state" aria-label="No posts published">
          <p className="font-mono text-xs uppercase tracking-[0.22em] text-ink-soft">No posts yet</p>
          <h2 className="heading-sm m-0 text-ink">The archive is empty.</h2>
          <p className="m-0 max-w-xl text-sm leading-6 text-ink-soft">
            Publish an MDX post to populate this list and enable archive search.
          </p>
        </section>
      )}
    </main>
  )
}