metis-desk/packages/rdx-ui/src/components/form-section.tsx

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,
  variant = "card",
}: {
  title: string;
  children: ReactNode;
  variant?: "card" | "plain";
}) {
  const id = useId();

  return (
    <section
      aria-labelledby={id}
      className={variant === "plain" ? "@container space-y-3" : "space-y-4 rounded-lg border p-4"}
    >
      <h3
        className={
          variant === "plain"
            ? "text-xs font-medium uppercase tracking-wide text-muted-foreground"
            : "text-sm font-semibold"
        }
        id={id}
      >
        {title}
      </h3>
      {children}
    </section>
  );
}