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

export const metadata = { title: 'Posts' }

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

  return (
    <main className="max-w-4xl mx-auto px-6 py-16">
      <h1 className="font-sans text-4xl font-extrabold tracking-tight lg:text-5xl mt-0 mb-12 text-ink">
        Posts
      </h1>
      <div className="space-y-12">
        {posts.map((post) => (
          <PostCard key={post.slug} {...post} />
        ))}
        {posts.length === 0 && (
          <p className="text-ink-soft">No posts yet.</p>
        )}
      </div>
    </main>
  )
}