import Link from 'next/link'
import type { Post, Tag } from '@/payload-types'

interface PostPreviewProps {
  post: Post
  number: number
  className?: string
}

function formatDate(dateStr: string): string {
  const date = new Date(dateStr)
  const y = date.getFullYear()
  const m = String(date.getMonth() + 1).padStart(2, '0')
  const d = String(date.getDate()).padStart(2, '0')
  return `${y}.${m}.${d}`
}

export function PostPreview({ post, number, className }: PostPreviewProps) {
  const { title, slug, publishDate, excerpt, tags } = post
  const paddedNumber = String(number).padStart(3, '0')
  const formattedDate = publishDate ? formatDate(publishDate) : ''

  // Only show tags when depth=1 returns Tag objects (not bare IDs)
  const resolvedTags: Tag[] = Array.isArray(tags)
    ? tags.filter((t): t is Tag => typeof t === 'object' && t !== null)
    : []
  const topTags = resolvedTags.slice(0, 3)

  return (
    <li className={`border-hair group list-none border-b ${className ?? ''}`}>
      <Link
        href={`/blog/${slug}/`}
        className="text-ink grid grid-cols-1 items-start gap-2 py-6 transition-[padding] duration-200 ease-out hover:pl-3 sm:grid-cols-[200px_1fr_auto] sm:gap-8 sm:py-7"
      >
        <div className="text-ink-3 hidden flex-col gap-1.5 font-mono text-[11px] tracking-wider sm:flex">
          <span className="text-ink font-serif text-[48px] leading-[0.9] font-normal tracking-[-0.02em]">
            {paddedNumber}
          </span>
          <span className="text-ink-3 tabular-nums">{formattedDate}</span>
        </div>

        <div className="max-w-[60ch]">
          <div className="text-ink-3 mb-2.5 font-mono text-[11px] tracking-wider tabular-nums sm:hidden">
            {formattedDate}
          </div>
          <h2 className="text-ink group-hover:decoration-ink-4 m-0 mb-2.5 font-serif text-[24px] leading-tight font-normal tracking-[-0.015em] group-hover:underline group-hover:underline-offset-4 sm:text-[32px]">
            {title}
          </h2>
          {excerpt && (
            <p className="text-ink-2 m-0 text-[15px] leading-[1.55] text-pretty">{excerpt}</p>
          )}
          {topTags.length > 0 && (
            <div className="text-ink-3 mt-3 flex flex-wrap gap-2 font-mono text-[10px] tracking-[0.1em] uppercase">
              {topTags.map((tag, i) => (
                <span key={tag.id}>
                  {i > 0 && <span className="text-ink-4 mr-2">·</span>}
                  {tag.name}
                </span>
              ))}
            </div>
          )}
        </div>

        <div className="tracking-mono text-ink-3 mt-2 text-left font-mono text-[11px] uppercase sm:mt-0 sm:min-w-[100px] sm:text-right">
          <span className="text-ink ml-1.5 opacity-0 transition-opacity group-hover:opacity-100">
            →
          </span>
        </div>
      </Link>
    </li>
  )
}