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

export interface NumberFieldErrorMessageProps extends JSX.HTMLAttributes<HTMLParagraphElement> {
  /** Error message content. */
  children?: JSX.Element | undefined;
  /** Whether the error is currently active. */
  visible?: boolean | undefined;
}

/** Error message for the NumberField. Shown when visible is true. */
export function NumberFieldErrorMessage(props: NumberFieldErrorMessageProps): JSX.Element {
  const [local, rest] = splitProps(props, ["children", "visible"]);
  const ctx = useNumberFieldContext();
  const id = createUniqueId();
  onMount(() => ctx.setErrorMessageId(id));
  onCleanup(() => ctx.setErrorMessageId(undefined));
  return (
    <Show when={local.visible}>
      <p id={id} aria-live="polite" {...rest}>
        {local.children}
      </p>
    </Show>
  );
}
