'use client'
import Link from 'next/link'

type Post = { slug: string; title: string; date: string; excerpt: string }

export default function BlogList({ posts }: { posts: Post[] }) {
  if (posts.length === 0) return (
    <div style={{ textAlign: 'center', padding: '4rem 0' }}>
      <p style={{ fontSize: 14, color: 'var(--body)' }}>No posts yet. Check back soon — or <Link href="/contact" style={{ color: 'var(--gold)' }}>contact us</Link> if you have a question.</p>
    </div>
  )
  return (
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(300px, 1fr))', gap: 16 }}>
      {posts.map(post => (
        <Link key={post.slug} href={`/blog/${post.slug}`} style={{ textDecoration: 'none' }}>
          <div className="card" style={{ padding: '1.5rem', height: '100%', transition: 'border-color 0.15s', cursor: 'pointer' }}
            onMouseEnter={e => (e.currentTarget.style.borderColor = 'var(--gold)')}
            onMouseLeave={e => (e.currentTarget.style.borderColor = 'var(--border)')}>
            <div style={{ fontSize: 10.5, color: 'var(--body)', marginBottom: 8 }}>{post.date}</div>
            <h2 style={{ fontSize: 15, fontWeight: 500, marginBottom: 8, lineHeight: 1.4 }}>{post.title}</h2>
            <p style={{ fontSize: 12.5, color: 'var(--body)', lineHeight: 1.65, margin: 0 }}>{post.excerpt}</p>
            <div style={{ marginTop: 14, fontSize: 12, color: 'var(--gold)', fontWeight: 500 }}>Read more →</div>
          </div>
        </Link>
      ))}
    </div>
  )
}