"use client";
import { jsx, jsxs } from "react/jsx-runtime";
import { forwardRef } from "react";
import { ExperimentalButton } from "./Button.js";
import { ExperimentalInput } from "./Input.js";
import { classNames } from "../utils/classNames.js";
const ExperimentalCurrencyInput = forwardRef(
  ({
    currency = "GRT",
    convertedAmount,
    convertedCurrency = "USD",
    onMaxClicked,
    className,
    ...props
  }, ref) => {
    return /* @__PURE__ */ jsx(
      ExperimentalInput,
      {
        ref,
        type: "number",
        trailingAction: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
          currency ? /* @__PURE__ */ jsx("div", { className: "text-c10 cursor-default text-white/48", children: currency }) : null,
          onMaxClicked ? /* @__PURE__ */ jsx(ExperimentalButton, { size: "small", disabled: props.disabled || props.readOnly, onClick: onMaxClicked, children: "Max" }) : null
        ] }),
        className: classNames(["gds-currency-input", className]),
        ...props,
        children: convertedAmount ? /* @__PURE__ */ jsxs("div", { className: "flex h-7 items-center px-3 py-2", children: [
          /* @__PURE__ */ jsx("div", { className: "absolute inset-x-px top-0 border-t border-t-white/8" }),
          /* @__PURE__ */ jsx("div", { className: "text-c10 w-0 flex-1 truncate text-white/64", children: `= ${convertedAmount} ${convertedCurrency}` })
        ] }) : null
      }
    );
  }
);
ExperimentalCurrencyInput.displayName = "ExperimentalCurrencyInput";
export {
  ExperimentalCurrencyInput
};
