import Link from 'next/link'
import PostCard from '@/components/blog/PostCard'
import { getAllPosts } from '@/app/blog/utils'

export const metadata = {
  title: 'Blog',
  description: 'Read my blog.',
}

export default async function Page() {
  const posts = await getAllPosts()

  return (
    <section className="mx-auto max-w-5xl px-4 md:px-6">
      <div className="mb-2">
        <Link
          href="/"
          className="inline-flex items-center gap-1 rounded-md px-2 py-1 text-sm text-neutral-700 transition-colors hover:bg-black/[0.04] hover:text-neutral-900 dark:text-neutral-300 dark:hover:bg-white/5 dark:hover:text-neutral-100"
          aria-label="Back to home"
        >
          ← <span className="underline-offset-4 hover:underline">Back home</span>
        </Link>
      </div>
      <h1 className="font-semibold text-2xl mb-6 tracking-tighter">My Blog</h1>
      <div className="grid grid-cols-1 gap-4 sm:gap-6 md:grid-cols-2">
        {posts.map((post) => (
          <PostCard key={post.slug} post={post} />
        ))}
      </div>
    </section>
  )
}