import { getPosts } from '@/lib/posts'
import { PostList } from '@/components/posts/PostList'

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

  return (
    <main className="mx-auto max-w-5xl px-6 py-10 sm:py-14">
      <section aria-labelledby="recent-heading" className="space-y-7">
        <div className="border-b border-border pb-5">
          <h1 id="recent-heading" className="heading-xl m-0 text-ink">
            Recent
          </h1>
        </div>

        {posts.length > 0 ? (
          <PostList posts={posts} />
        ) : (
          <div className="empty-state">
            <p className="font-mono text-xs uppercase tracking-[0.22em] text-ink-soft">No posts yet</p>
            <h3 className="heading-sm m-0 text-ink">The notebook is ready.</h3>
            <p className="m-0 max-w-xl text-sm leading-6 text-ink-soft">
              Add your first MDX post and it will show up here with the same polished card treatment.
            </p>
          </div>
        )}
      </section>
    </main>
  )
}