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

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

/**
 * FeaturedArticle Component
 * 
 * Displays a prominent featured article section on the homepage.
 * Uses ArticleCard with featured prop for larger display.
 * 
 * Features:
 * - Section heading with soft pink gradient
 * - Large featured article card
 * - Generous spacing and padding
 * - Responsive design
 */
export function FeaturedArticle({ article }: FeaturedArticleProps) {
  // Don't render if no article
  if (!article) {
    return null;
  }

  return (
    <section className="py-12 md:py-16 bg-white">
      <div className="container">
        {/* Section heading with soft pink gradient */}
        <h2 className="text-3xl md:text-4xl font-semibold mb-8 text-center bg-gradient-to-r from-[#E38A9B] to-[#F4C7CF] bg-clip-text text-transparent">
          注目の記事
        </h2>
        
        {/* Featured article card - uses ArticleCard with featured prop */}
        <div className="max-w-4xl mx-auto">
          <ArticleCard 
            article={article} 
            featured={true}
            priority={true}
          />
        </div>
      </div>
    </section>
  );
}
