import { ArticleCard } from './ArticleCard';

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

interface RelatedArticlesProps {
  articles: Article[];
}

export function RelatedArticles({ articles }: RelatedArticlesProps) {
  if (!articles || articles.length === 0) {
    return null;
  }

  return (
    <section className="mt-16 pt-8 border-t border-[#2A2A33]">
      <h2 className="text-2xl font-semibold mb-6 text-white border-l-4 border-[#E60023] pl-4">関連記事</h2>
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
        {articles.map((article) => (
          <ArticleCard key={article.id} article={article} />
        ))}
      </div>
    </section>
  );
}
