import ArticleCard from './ArticleCard';
import { Flame } from 'lucide-react';

/**
 * Блок «Популярное за неделю/месяц».
 * Не рендерится если пусто.
 */
export default function PopularBlock({ articles }) {
  if (!articles || articles.length === 0) return null;
  return (
    <section className="container-wide pb-10">
      <div className="flex items-center gap-2 mb-5 pb-3 border-b border-orange-200 dark:border-orange-900">
        <Flame className="w-5 h-5 text-orange-500" />
        <h2 className="text-xl sm:text-2xl font-bold text-orange-600 dark:text-orange-400">
          Популярное за месяц
        </h2>
      </div>
      <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-5">
        {articles.map(a => <ArticleCard key={a.id} article={a} />)}
      </div>
    </section>
  );
}