'use client';

import ArticleCard, { type ArticleCardData } from './ArticleCard';
import { Newspaper } from 'lucide-react';
import { motion } from 'framer-motion';

const DUMMY_ARTICLES: ArticleCardData[] = [];

export default function ArticlesGrid() {
  const isEmpty = DUMMY_ARTICLES.length === 0;

  return (
    <section className="bg-white py-12 md:py-20">
      <div className="container mx-auto px-4">
        {isEmpty ? (
          <motion.div
            initial={{ opacity: 0, y: 16 }}
            animate={{ opacity: 1, y: 0 }}
            className="flex flex-col items-center py-24 px-4 text-center bg-white border border-gray-200 rounded-[20px] shadow-sm max-w-2xl mx-auto"
          >
            <div className="w-20 h-20 bg-gray-50 border border-gray-200 rounded-full flex items-center justify-center mb-6">
              <Newspaper className="w-10 h-10 text-gray-400" />
            </div>
            <p className="font-black text-gray-900 text-2xl tracking-tight mb-2">
              Belum Ada Artikel
            </p>
            <p className="text-gray-600 text-sm max-w-sm">
              Saat ini belum ada artikel atau berita terbaru yang dapat
              ditampilkan.
            </p>
          </motion.div>
        ) : (
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8 max-w-[1296px] mx-auto">
            {DUMMY_ARTICLES.map((article, idx) => (
              <ArticleCard key={article.id} article={article} index={idx} />
            ))}
          </div>
        )}
      </div>
    </section>
  );
}