// packages/core/src/components/form/form-description.tsx
import type { JSX } from "solid-js";
import { splitProps } from "solid-js";
import { useFormFieldContext } from "./form-context";
import type { FormDescriptionProps } from "./form.props";

export type { FormDescriptionProps };

/**
 * Renders a <p> element with the field's description ID so controls can
 * reference it via aria-describedby.
 */
export function FormDescription(props: FormDescriptionProps): JSX.Element {
  const [local, rest] = splitProps(props, ["children"]);
  const fieldCtx = useFormFieldContext();

  return (
    <p id={fieldCtx.descriptionId} {...rest}>
      {local.children}
    </p>
  );
}
