import type { ReactNode } from 'react';

interface SectionProps {
  title: string;
  hint?: string;
  children: ReactNode;
}

/** Content section with the standard uppercase tracking label. */
export function Section({ title, hint, children }: SectionProps) {
  return (
    <section>
      <h2 className="mb-3 text-xs font-medium uppercase tracking-widest text-gray-500">
        {title}
        {hint && <span className="ml-2 normal-case tracking-normal text-gray-600">{hint}</span>}
      </h2>
      {children}
    </section>
  );
}
