import type { ReactNode } from "react";
import { useId } from "react";

/** Bloque visual reutilizable con título accesible; no altera validación ni datos. */
export function FormSection({ title, children }: { title: string; children: ReactNode }) {
  const id = useId();
  return (
    <section aria-labelledby={id} className="space-y-4 rounded-lg border p-4">
      <h3 className="text-sm font-semibold" id={id}>
        {title}
      </h3>
      {children}
    </section>
  );
}