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

import { FormSectionTitle } from "./form-section-title";

/** 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"}
    >
      <FormSectionTitle id={id}>{title}</FormSectionTitle>
      {children}
    </section>
  );
}