import { type ReactNode } from 'react';

export function TitleHighlight({ children }: { children: ReactNode }) {
  return (
    <span className="relative inline-block text-primary-600">
      {children}
      <svg
        className="absolute -bottom-1.5 left-0 w-full text-primary-400"
        viewBox="0 0 180 12"
        preserveAspectRatio="none"
        aria-hidden
      >
        <path
          d="M2 9C40 2 140 2 178 9"
          stroke="currentColor"
          strokeWidth="4"
          strokeLinecap="round"
          fill="none"
        />
      </svg>
    </span>
  );
}

interface SectionHeaderProps {
  badge: string;
  title: ReactNode;
  description?: string;
  /** compact = one-screen sections; tight = standard content sections */
  spacing?: 'compact' | 'tight' | 'normal';
  className?: string;
}

const spacingClasses = {
  compact: 'mb-3 lg:mb-4',
  tight: 'mb-6 md:mb-8',
  normal: 'mb-8 md:mb-10',
} as const;

export function SectionHeader({
  badge,
  title,
  description,
  spacing = 'normal',
  className = '',
}: SectionHeaderProps) {
  return (
    <div className={`mx-auto max-w-2xl text-center ${spacingClasses[spacing]} ${className}`}>
      <span className="inline-flex items-center gap-2 rounded-full border border-primary-500/30 bg-primary-500/10 px-4 py-1.5 text-xs font-bold uppercase tracking-widest text-primary-700">
        <span className="h-1.5 w-1.5 rounded-full bg-primary-500" />
        {badge}
      </span>
      <h2 className="mt-4 text-2xl font-black leading-tight text-neutral-900 sm:text-3xl md:text-4xl">
        {title}
      </h2>
      {description ? (
        <p className="mt-3 text-base leading-relaxed text-neutral-600">{description}</p>
      ) : null}
    </div>
  );
}