import type { ReactNode } from "react";

/** Título común para grupos de un diálogo, independiente de su nivel semántico. */
export function FormSectionTitle({
  children,
  id,
  as: Heading = "h3",
  layout = Heading === "span" ? "inline" : "standalone",
}: {
  children: ReactNode;
  id?: string;
  as?: "h3" | "h4" | "h5" | "legend" | "span";
  layout?: "standalone" | "inline";
}) {
  return (
    <Heading
      className={`text-xs font-semibold uppercase tracking-wide text-muted-foreground ${layout === "inline" ? "" : "mb-4"}`}
      id={id}
    >
      {children}
    </Heading>
  );
}