import type { ReactNode } from 'react';
import { cn } from '@/lib/cn';

/**
 * Editorial section: eyebrow/heading + subtitle on the left, optional actions on the right, a 1 px rule above.
 * Use instead of cards. `id` makes it linkable from TopicNav / TOC.
 */
export function Section({
  id,
  title,
  subtitle,
  eyebrow,
  actions,
  children,
  className,
  level = 2,
  tight = false,
}: {
  id?: string;
  title: ReactNode;
  subtitle?: ReactNode;
  eyebrow?: ReactNode;
  actions?: ReactNode;
  children: ReactNode;
  className?: string;
  level?: 2 | 3;
  tight?: boolean;
}) {
  const H = level === 2 ? 'h2' : 'h3';
  return (
    <section id={id} className={cn('hairline min-w-0 scroll-mt-28', tight ? 'pt-4 pb-6' : 'pt-6 pb-10 md:pt-8 md:pb-14', className)} aria-labelledby={id ? `${id}-h` : undefined}>
      <div className="mb-4 flex flex-wrap items-end justify-between gap-x-6 gap-y-2 md:mb-6">
        <div className="min-w-0">
          {eyebrow ? <div className="eyebrow mb-1">{eyebrow}</div> : null}
          <H id={id ? `${id}-h` : undefined} className={cn('display text-ink', level === 2 ? 'text-2xl md:text-3xl' : 'text-xl md:text-2xl')}>
            {title}
          </H>
          {subtitle ? <p className="mt-1 max-w-prose text-sm text-ink-2 md:text-base">{subtitle}</p> : null}
        </div>
        {actions ? <div className="flex shrink-0 flex-wrap items-center gap-2 text-sm">{actions}</div> : null}
      </div>
      {children}
    </section>
  );
}