import ArticleCard from '@/components/article/ArticleCard'
import type { Article } from '@/lib/types'

interface Props {
  articles: Article[]
  title?: string
}

export default function ArticleGrid({ articles, title }: Props) {
  if (articles.length === 0) return null

  return (
    <section className="max-w-[1200px] mx-auto px-6 py-6">
      {title && (
        <div className="flex items-center gap-4 mb-5">
          <h2 className="text-xs font-bold text-text-primary uppercase tracking-widest shrink-0">
            {title}
          </h2>
          <div className="flex-1 h-px bg-border" />
        </div>
      )}
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
        {articles.map((article) => (
          <ArticleCard key={article.id} article={article} />
        ))}
      </div>
    </section>
  )
}