// packages/core/src/components/number-field/number-field-description.tsx
import type { JSX } from "solid-js";
import { createUniqueId, onCleanup, onMount, splitProps } from "solid-js";
import { useNumberFieldContext } from "./number-field-context";

export interface NumberFieldDescriptionProps extends JSX.HTMLAttributes<HTMLParagraphElement> {
  /** Description content. */
  children?: JSX.Element | undefined;
}

/** Helper text for the NumberField. Linked via aria-describedby. */
export function NumberFieldDescription(props: NumberFieldDescriptionProps): JSX.Element {
  const [local, rest] = splitProps(props, ["children"]);
  const ctx = useNumberFieldContext();
  const id = createUniqueId();
  onMount(() => ctx.setDescriptionId(id));
  onCleanup(() => ctx.setDescriptionId(undefined));
  return (
    <p id={id} {...rest}>
      {local.children}
    </p>
  );
}
