import { cn } from '@/lib/cn';

interface SectionHeadingProps {
  eyebrow: string;
  title: React.ReactNode;
  description?: React.ReactNode;
  /** `center`: stacked + centered. `split`: title left, description right (desktop). */
  layout?: 'center' | 'split';
  className?: string;
}

export function SectionHeading({
  eyebrow,
  title,
  description,
  layout = 'center',
  className,
}: SectionHeadingProps) {
  if (layout === 'split') {
    return (
      <div
        className={cn(
          'flex flex-col gap-5 md:flex-row md:items-end md:justify-between md:gap-12',
          className,
        )}
      >
        <div>
          <p className="eyebrow text-subtle">{eyebrow}</p>
          <h2 className="mt-4 text-[32px] font-semibold leading-[1.12] tracking-[-0.02em] text-ink sm:text-[40px]">
            {title}
          </h2>
        </div>
        {description && (
          <p className="max-w-[300px] text-sm leading-relaxed text-muted md:mb-2">{description}</p>
        )}
      </div>
    );
  }

  return (
    <div className={cn('mx-auto max-w-2xl text-center', className)}>
      <p className="eyebrow text-subtle">{eyebrow}</p>
      <h2 className="mt-4 text-[32px] font-semibold leading-[1.12] tracking-[-0.02em] text-ink sm:text-[40px]">
        {title}
      </h2>
      {description && <p className="mt-4 text-[15px] leading-relaxed text-muted">{description}</p>}
    </div>
  );
}