import { fieldVariants, type FieldVariants } from "./variants.ts";
import { cn } from "#lib/utils.ts";

export interface Input extends Marko.Input<"div">, FieldVariants {
  /**
   * Marks the field as invalid. Sets `data-invalid` on the wrapper, which every
   * descendant part restyles against via `group-data-*` selectors. The matching
   * `aria-invalid` belongs on the control itself.
   */
  invalid?: boolean;
  /** Sets `data-disabled`, dimming the label and title. */
  disabled?: boolean;
}

<const/{
  orientation = "vertical",
  invalid,
  disabled,
  class: className,
  content,
  ...rest
}=input/>

<div
  role="group"
  data-slot="field"
  data-orientation=orientation
  data-invalid=(invalid ? "true" : undefined)
  data-disabled=(disabled ? "true" : undefined)
  class=cn(fieldVariants({ orientation }), className)
  ...rest
>
  <${content}/>
</div>