/**
 * FeaturedPostsSection - Editorial-style featured articles section
 *
 * Displays featured blog posts in a 2-column grid with
 * large images and overlay content.
 */

import { BlogMetadata } from "@/lib/blog.types";
import {
  BLOG_COLORS,
  BLOG_STYLES,
  SECTION_NUMBERS,
  formatBlogDate,
} from "@/lib/blog.config";
import FeaturedCard from "./FeaturedCard";
import SectionHeader from "./SectionHeader";

export interface FeaturedPostsSectionProps {
  /** Featured blog posts to display */
  posts: BlogMetadata[];
  /** Language for localization */
  lang: "ar" | "en";
  /** Translations for display text */
  translations: {
    featured: string;
    featuredArticles: string;
  };
}

export default function FeaturedPostsSection({
  posts,
  lang,
  translations,
}: FeaturedPostsSectionProps) {
  if (posts.length === 0) {
    return null;
  }

  return (
    <section
      className="py-16 md:py-24"
      style={{ backgroundColor: BLOG_COLORS.bgSecondary }}
      aria-labelledby="featured-posts-heading"
    >
      <div className="mx-auto max-w-7xl px-6">
        {/* Section Header */}
        <SectionHeader
          sectionNumber={SECTION_NUMBERS.featured}
          title={translations.featuredArticles}
          badge={translations.featured}
        />

        {/* Featured Grid */}
        <div className={`grid lg:grid-cols-2 ${BLOG_STYLES.editorialGrid}`}>
          {posts.map((post) => (
            <FeaturedCard key={post.slug} post={post} lang={lang} />
          ))}
        </div>
      </div>
    </section>
  );
}