import Link from 'next/link'
import { formatDate, getBlogPosts } from '@/app/blog/utils'

export function BlogPosts() {
  const allBlogs = getBlogPosts()

  return (
    <ul className="divide-y divide-black/5 dark:divide-white/10">
      {allBlogs
        .sort((a, b) => {
          if (new Date(a.metadata.publishedAt) > new Date(b.metadata.publishedAt)) {
            return -1
          }
          return 1
        })
        .map((post) => (
          <li key={post.slug}>
            <Link
              className="group flex items-baseline justify-between gap-4 rounded-md px-2 py-2 transition-colors hover:bg-black/[0.04] dark:hover:bg-white/5"
              href={`/blog/${post.slug}`}
              aria-label={`Read: ${post.metadata.title}`}
            >
              <span className="w-32 flex-none text-xs text-neutral-600 dark:text-neutral-400 tabular-nums">
                {formatDate(post.metadata.publishedAt, false)}
              </span>
              <span className="flex-1 text-neutral-900 dark:text-neutral-100 tracking-tight underline-offset-4 group-hover:underline">
                {post.metadata.title}
              </span>
              <span className="hidden sm:inline text-neutral-400 transition-colors group-hover:text-neutral-600 dark:group-hover:text-neutral-300">
                →
              </span>
            </Link>
          </li>
        ))}
    </ul>
  )
}