import type { ReactNode } from 'react';

/** Consistent section heading: smallcaps label with optional right-side extra. */
export function SectionTitle({ children, extra }: { children: ReactNode; extra?: ReactNode }) {
  return (
    <div className="mb-3 mt-6 flex items-baseline justify-between gap-3 first:mt-0">
      <h2 className="smallcaps text-xs font-bold uppercase tracking-widest text-faint">{children}</h2>
      {extra != null && <div className="text-xs text-faint">{extra}</div>}
    </div>
  );
}