'use client';

import * as React from 'react';
import { ArticleCard } from '@/components/article/ArticleCard';

interface Article {
  slug: string;
  title: string;
  excerpt: string | null;
  cardImage: string | null;
  publicationDate: Date | null;
  category: string | null;
  readingTime: number | null;
}

interface ArticleGridProps {
  articles: Article[];
}

/**
 * ArticleGrid Component
 * 
 * Displays a responsive grid of article cards for category pages.
 * 
 * Features:
 * - Responsive grid layout: 1 column (mobile), 2 columns (tablet), 3 columns (desktop)
 * - Maps articles to ArticleCard components
 * - Handles empty state with friendly message
 * - Soft pink and beige color palette
 * - Generous whitespace for comfortable browsing
 */
export function ArticleGrid({ articles }: ArticleGridProps) {
  // Handle empty state
  if (!articles || articles.length === 0) {
    return (
      <div className="flex flex-col items-center justify-center py-16 px-4">
        <div className="text-center max-w-md">
          {/* Icon */}
          <div className="text-6xl mb-4">📝</div>
          
          {/* Message */}
          <h3 className="text-xl font-semibold text-[#222222] mb-2">
            記事がありません
          </h3>
          <p className="text-[#666666] leading-relaxed">
            このカテゴリーにはまだ記事が投稿されていません。
            <br />
            新しい記事をお楽しみに！
          </p>
        </div>
      </div>
    );
  }

  return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
      {articles.map((article, index) => (
        <ArticleCard 
          key={article.slug} 
          article={article}
          priority={index < 6} // Priority for first 6 images (above-fold)
        />
      ))}
    </div>
  );
}
