'use client'

import Link from 'next/link'
import { ArrowRight } from 'lucide-react'
import { SectionHeader } from './section-header'
import { POSTS } from '@/lib/blog-data'

export function Blog() {
  return (
    <section id="blog" className="py-24 px-6 max-w-5xl mx-auto">
      <SectionHeader label="Writing" />

      <div className="flex items-end justify-between mb-12 mt-4">
        <h2 className="font-serif text-3xl font-semibold text-foreground text-balance">
          Latest articles
        </h2>
        <Link href="/blog" className="hidden sm:inline-flex items-center gap-1.5 text-sm text-primary hover:underline underline-offset-4">
          All posts <ArrowRight size={14} />
        </Link>
      </div>

      <div className="divide-y divide-border">
        {POSTS.map((post, idx) => (
          <Link
            href={`/blog/${post.slug}`}
            key={post.slug}
            className="group py-6 first:pt-0 last:pb-0 flex flex-col sm:flex-row sm:items-start gap-4 sm:gap-8 cursor-pointer block"
          >
            {/* Index */}
            <span className="hidden sm:block text-xs text-muted-foreground tabular-nums pt-0.5 w-6 shrink-0">
              {String(idx + 1).padStart(2, '0')}
            </span>

            <div className="flex-1">
              <div className="flex items-center gap-3 mb-2">
                <span className="text-xs font-medium text-primary bg-primary/10 px-2 py-0.5 rounded-full">
                  {post.tag}
                </span>
                <span className="text-xs text-muted-foreground">
                  {post.date} &middot; {post.readTime}
                </span>
              </div>
              <h3 className="font-serif font-semibold text-foreground text-base group-hover:text-primary transition-colors mb-2 text-balance">
                {post.title}
              </h3>
              <p className="text-sm text-muted-foreground leading-relaxed">{post.excerpt}</p>
            </div>

            <ArrowRight
              size={16}
              className="shrink-0 text-muted-foreground group-hover:text-primary group-hover:translate-x-1 transition-all mt-1"
              aria-hidden="true"
            />
          </Link>
        ))}
      </div>

      <Link href="/blog" className="sm:hidden mt-8 inline-flex items-center gap-1.5 text-sm text-primary hover:underline underline-offset-4">
        All posts <ArrowRight size={14} />
      </Link>
    </section>
  )
}
