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

export interface Input extends Marko.Input<"div">, InputGroupAddonVariants {}

<const/{ align = "inline-start", class: className, content, ...rest }=input/>

<div
  role="group"
  data-slot="input-group-addon"
  data-align=align
  ...rest
  onClick(event, target: HTMLElement) {
    if ((event.target as HTMLElement).closest("button")) return;
    // event.currentTarget is unsupported in Marko's delegated events —
    // the handler's 2nd argument is the element the handler is bound to.
    target.parentElement
      ?.querySelector<HTMLElement>("input")
      ?.focus();
  }
  class=cn(inputGroupAddonVariants({ align }), className)
>
  <${content}/>
</div>