import type { ReactNode } from 'react';

/** Editorial section: kicker, serif title, optional description and right-aligned actions. */
export function Section({
  id,
  kicker,
  title,
  description,
  actions,
  children,
  className = '',
  level = 2,
}: {
  id?: string;
  kicker?: string;
  title: ReactNode;
  description?: ReactNode;
  actions?: ReactNode;
  children: ReactNode;
  className?: string;
  level?: 2 | 3;
}) {
  const H = level === 3 ? 'h3' : 'h2';
  return (
    <section id={id} aria-labelledby={id ? `${id}-title` : undefined} className={`ci-rule pt-5 ${className}`}>
      <div className="mb-3 flex flex-wrap items-end justify-between gap-2">
        <div className="min-w-0">
          {kicker ? <p className="ci-kicker mb-1">{kicker}</p> : null}
          <H id={id ? `${id}-title` : undefined} className={level === 3 ? 'text-lg' : 'text-xl sm:text-2xl'}>
            {title}
          </H>
          {description ? <p className="mt-1 max-w-3xl text-[13.5px] text-ink-2">{description}</p> : null}
        </div>
        {actions ? <div className="flex shrink-0 items-center gap-2 text-[13px]">{actions}</div> : null}
      </div>
      {children}
    </section>
  );
}

export function PageHeader({ kicker, title, lede, children, className = '' }: { kicker?: string; title: ReactNode; lede?: ReactNode; children?: ReactNode; className?: string }) {
  return (
    <header className={`pb-4 pt-6 sm:pt-8 ${className}`}>
      {kicker ? <p className="ci-kicker mb-2">{kicker}</p> : null}
      <h1 className="text-3xl leading-tight sm:text-4xl">{title}</h1>
      {lede ? <p className="mt-2 max-w-3xl text-[15px] leading-relaxed text-ink-2">{lede}</p> : null}
      {children}
    </header>
  );
}

/** Definition list in two columns, dense. */
export function KV({ items, className = '' }: { items: Array<{ k: ReactNode; v: ReactNode }>; className?: string }) {
  const rows = items.filter((i) => i.v !== null && i.v !== undefined && i.v !== '');
  if (rows.length === 0) return null;
  return (
    <dl className={`grid grid-cols-[minmax(110px,auto)_1fr] gap-x-4 gap-y-1.5 text-[13.5px] ${className}`}>
      {rows.map((r, i) => (
        <div key={i} className="contents">
          <dt className="text-ink-3">{r.k}</dt>
          <dd className="min-w-0 break-words text-ink">{r.v}</dd>
        </div>
      ))}
    </dl>
  );
}

export function Note({ children, tone = 'neutral' }: { children: ReactNode; tone?: 'neutral' | 'warn' }) {
  return <p className={`border-l-2 pl-3 text-[12.5px] leading-relaxed ${tone === 'warn' ? 'border-warn text-warn' : 'border-rule-strong text-ink-3'}`}>{children}</p>;
}