import type * as React from "react";
import { Input } from "~/components/ui/input.tsx";
import { cn } from "~/lib/utils.ts";

/**
 * 带固定单位后缀的数字输入(如 token 数以 K 为单位:输入 128 表示 128K)。
 * 值是字符串,允许小数;换算与校验由调用方做(token 见 ~/lib/tokens.ts)。
 */
export function UnitInput({
  unit,
  className,
  inputClassName,
  ...props
}: Omit<React.ComponentProps<"input">, "type"> & { unit: string; inputClassName?: string }) {
  return (
    <div className={cn("relative min-w-0", className)}>
      <Input
        type="text"
        inputMode="decimal"
        autoComplete="off"
        {...props}
        className={cn("pr-9 tabular-nums", inputClassName)}
      />
      <span
        aria-hidden
        className="pointer-events-none absolute inset-y-0 right-3 flex items-center text-caption text-muted-foreground"
      >
        {unit}
      </span>
    </div>
  );
}