import { InputGroupAddon } from "@aur-ui/ui/components/input-group-addon";
import { InputGroupInput } from "@aur-ui/ui/components/input-group-input";
import { cn } from "@aur-ui/ui/lib/utils";
import type * as React from "react";

/**
 * Input Group — wraps a text input together with leading/trailing addons
 * (icons, a dropdown trigger, …) inside ONE field shell. The shell tokens
 * mirror {@link Input}/{@link SelectTrigger} so a grouped field lines up
 * pixel-for-pixel with bare inputs: the container owns the fill + focus ring
 * (driven by `focus-within`) while the inner input stays transparent.
 */
function InputGroup({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="input-group"
      className={cn(
        "flex h-10 w-full items-center gap-1 rounded-control bg-ink-wash px-1.5 transition-colors",
        "hover:bg-stripe focus-within:bg-surface focus-within:ring-2 focus-within:ring-brand/30",
        "has-[input:disabled]:pointer-events-none has-[input:disabled]:opacity-60",
        "has-[[aria-invalid=true]]:ring-2 has-[[aria-invalid=true]]:ring-danger-soft",
        className,
      )}
      {...props}
    />
  );
}

export { InputGroup, InputGroupAddon, InputGroupInput };