interface FormSectionProps {
  title: string;
  hint?: string;
  children: React.ReactNode;
}

export default function FormSection({ title, hint, children }: FormSectionProps) {
  return (
    <section className="space-y-3.5 rounded-2xl border border-[var(--border)] bg-[var(--bg)]/40 p-3.5 sm:p-4">
      <div>
        <p className="text-sm font-semibold text-[var(--text)]">{title}</p>
        {hint && <p className="mt-0.5 text-xs leading-relaxed text-[var(--text-faint)]">{hint}</p>}
      </div>
      {children}
    </section>
  );
}