import { getAllPosts } from "@/lib/api"
import { PostPreview } from "@/components/post-preview"

// Make sure this is a Server Component (default in App Router)
export default function Home() {
  // Use synchronous data fetching to avoid suspense issues
  const posts = getAllPosts()

  // Sort posts by date (newest first)
  const sortedPosts = posts.sort((a, b) => new Date(b.metadata.date).getTime() - new Date(a.metadata.date).getTime())

  return (
    <div className="space-y-8 w-full">
      <section>
        <h2 className="sr-only">Blog posts</h2>
        <ul className="space-y-6 w-full">
          {sortedPosts.map((post) => (
            <li key={post.slug} className="transition-all duration-300 w-full">
              <PostPreview post={post} />
            </li>
          ))}
        </ul>
      </section>
    </div>
  )
}