import Link from 'next/link'
import type { PostMeta } from '@/types/Post.type'
import { cn } from '@/utils/cn'
import { dateFormatter } from '@/utils/time'

/** Compact list of post titles with dates, used on the tag and category pages. */
export function PostList({ posts, className }: { posts: PostMeta[]; className?: string }) {
  return (
    <ul className={cn('border-l border-border mb-3', className)}>
      {posts.map((post) => (
        <li key={post.slug} className="pl-5">
          <Link
            href={`/posts/${post.slug}`}
            className="group flex items-baseline justify-between gap-3 py-1.5 px-2 -ml-2 border-l-2 border-transparent hover:bg-accent/10 hover:border-accent transition-colors"
          >
            <span className="group-hover:text-accent transition-colors truncate">{post.title}</span>
            <time dateTime={post.date} className="text-sm whitespace-nowrap">
              {dateFormatter.format(new Date(post.date))}
            </time>
          </Link>
        </li>
      ))}
    </ul>
  )
}