/**
 * SectionHeader - Reusable editorial-style section header
 *
 * Used across blog pages for consistent section headers with
 * numbered markers and optional badges.
 */

import { BLOG_COLORS, BLOG_STYLES } from "@/lib/blog.config";

export interface SectionHeaderProps {
  /** Section number (e.g., '01', '02', 'CTA', 'MORE') */
  sectionNumber: string;
  /** Main heading text */
  title: string;
  /** Optional subtitle text */
  subtitle?: string;
  /** Optional badge text (e.g., 'Featured') */
  badge?: string;
  /** Text direction for RTL support */
  dir?: "ltr" | "rtl";
  /** Custom className for additional styling */
  className?: string;
}

export default function SectionHeader({
  sectionNumber,
  title,
  subtitle,
  badge,
  dir = "ltr",
  className = "",
}: SectionHeaderProps) {
  return (
    <div className={`flex items-start gap-4 mb-12 ${className}`}>
      {/* Section marker */}
      <div className="flex items-center gap-3 pt-2">
        <span className={BLOG_STYLES.sectionMarker} dir="ltr">
          {sectionNumber}
        </span>
        <div className={BLOG_STYLES.dividerLine} />
      </div>

      {/* Title and subtitle */}
      <div>
        {badge && (
          <span
            className="inline-flex items-center gap-2 px-3 py-1 mb-3"
            style={{
              backgroundColor: `${BLOG_COLORS.primary}1A`, // 10% opacity
              color: BLOG_COLORS.primary,
            }}
          >
            <span className={BLOG_STYLES.dotIndicator} />
            <span className="text-xs font-bold uppercase tracking-wider">
              {badge}
            </span>
          </span>
        )}
        <h2
          className="text-3xl md:text-4xl font-bold"
          style={{ color: BLOG_COLORS.heading }}
        >
          {title}
        </h2>
        {subtitle && (
          <p className="mt-2" style={{ color: BLOG_COLORS.body }}>
            {subtitle}
          </p>
        )}
      </div>
    </div>
  );
}