import * as React from 'react';
import Link from 'next/link';
import { ChevronRight } from 'lucide-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 CategorySectionProps {
  categoryName: string;
  articles: Article[];
  index?: number;
}

/**
 * CategorySection Component
 * 
 * Displays a category section with article cards on dark background.
 * Used on the homepage to show articles from each category.
 * 
 * Features:
 * - Category heading with vertical red accent bar
 * - "もっと見る →" link (crimson red) to category page
 * - Responsive grid: 1 column (mobile), 2 columns (tablet), 4 columns (desktop)
 * - ArticleCard components with dark theme
 * - Limits to 4 articles per category
 */
export function CategorySection({ 
  categoryName, 
  articles,
  index = 0
}: CategorySectionProps) {
  // Limit to 4 articles per category
  const displayArticles = articles.slice(0, 4);

  // Don't render if no articles
  if (displayArticles.length === 0) {
    return null;
  }

  return (
    <section className="py-12 md:py-16 bg-[#0F0F12]">
      <div className="container">
        {/* Category heading with vertical red accent bar and "もっと見る" link */}
        <div className="flex items-center justify-between mb-8">
          {/* Category heading with vertical red accent bar */}
          <h2 className="text-2xl md:text-3xl font-bold text-white border-l-4 border-[#E60023] pl-4">
            {categoryName}
          </h2>
          
          {/* "もっと見る →" link (crimson red) */}
          <Link
            href={`/category/${encodeURIComponent(categoryName)}`}
            className="flex items-center gap-1 text-sm md:text-base font-medium text-[#E60023] hover:text-[#FF2A3D] transition-colors group"
          >
            <span>もっと見る</span>
            <ChevronRight className="h-4 w-4 transition-transform group-hover:translate-x-1" />
          </Link>
        </div>
        
        {/* Responsive grid (1/2/4 columns) */}
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
          {displayArticles.map((article) => (
            <ArticleCard
              key={article.slug}
              article={article}
              priority={index === 0}
            />
          ))}
        </div>
      </div>
    </section>
  );
}
