import { splitProps, type JSX } from "solid-js";
import { cn } from "../../lib/cn";

export type FieldProps = JSX.LabelHTMLAttributes<HTMLLabelElement>;

/**
 * Associates a label and form control while keeping field layout consistent.
 *
 * Keep validation and help text at the call site: those messages are domain
 * content, while Field only owns spacing and label typography.
 */
export function Field(props: FieldProps) {
  const [local, rest] = splitProps(props, ["class", "children"]);
  return (
    <label {...rest} data-slot="field" class={cn("block", local.class)}>
      {local.children}
    </label>
  );
}

export type FieldLabelProps = JSX.HTMLAttributes<HTMLSpanElement>;

export function FieldLabel(props: FieldLabelProps) {
  const [local, rest] = splitProps(props, ["class", "children"]);
  return (
    <span
      {...rest}
      data-slot="field-label"
      class={cn("mb-1.5 block text-xs font-semibold text-muted", local.class)}
    >
      {local.children}
    </span>
  );
}
