import { cn } from "@aur-ui/ui/lib/utils";
import type * as React from "react";

/**
 * Text input. The base style is the de-facto field style used across the
 * dashboard dialogs (soft fill, lifts to surface on focus). Pass `mono` for
 * monospaced value entry (e.g. API tokens) while keeping the placeholder
 * in the sans font.
 */
function Input({
  className,
  type,
  mono = false,
  ...props
}: React.ComponentProps<"input"> & { mono?: boolean }) {
  return (
    <input
      type={type}
      data-slot="input"
      className={cn(
        // h-10 pins the field to the 40px control row (same as Button's
        // toolbar/lg sizes) — padding-driven height landed on an off-grid
        // 41px and misaligned mixed rows.
        "h-10 w-full min-w-0 rounded-control bg-ink-wash px-3 text-md text-ink-900 transition-colors outline-none",
        "placeholder:text-ink-400 selection:bg-brand-soft selection:text-brand",
        "hover:bg-stripe focus:bg-surface focus-visible:ring-2 focus-visible:ring-brand/30",
        "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-60",
        "aria-invalid:ring-2 aria-invalid:ring-danger-soft",
        mono && "font-mono placeholder:font-sans",
        className,
      )}
      {...props}
    />
  );
}

export { Input };