"use client";
import { jsx, jsxs } from "react/jsx-runtime";
import { forwardRef } from "react";
import { ExperimentalBaseFieldBox } from "./BaseField.js";
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
  }, forwardedRef) => {
    return /* @__PURE__ */ jsx(
      ExperimentalInput,
      {
        ref: forwardedRef,
        type: "number",
        unit: currency,
        action: onMaxClicked ? /* @__PURE__ */ jsx(ExperimentalButton, { disabled: props.disabled || props.readOnly, onClick: onMaxClicked, children: "Max" }) : null,
        className: classNames(["gds-currency-input", className]),
        ...props,
        children: ({ inputWithUnitAndAction }) => /* @__PURE__ */ jsxs(ExperimentalBaseFieldBox, { children: [
          inputWithUnitAndAction,
          convertedAmount ? /* @__PURE__ */ jsxs(
            "div",
            {
              className: `
                  flex items-center pb-px transition
                  @prop-size-small/field:text-c10
                  @prop-size-medium/field:text-c12
                  @prop-size-large/field:text-c12
                  @state-blank/field:@state-not-disabled/field:text-placeholder
                  @prop-size-small/field:h-7
                  @prop-size-small/field:px-2
                  @prop-size-medium/field:h-8
                  @prop-size-medium/field:px-3
                  @prop-size-large/field:h-8
                  @prop-size-large/field:px-3
                `,
              children: [
                /* @__PURE__ */ jsx(
                  "div",
                  {
                    className: `
                    absolute inset-x-px -top-px border-t border-space-1200 transition
                    @state-hover/field:border-space-1100
                    @state-focus/field:border-space-1100
                    @state-not-enabled/field:border-space-1300
                  `
                  }
                ),
                /* @__PURE__ */ jsx("div", { className: "w-0 flex-1 truncate", children: `= ${convertedAmount} ${convertedCurrency}` })
              ]
            }
          ) : null
        ] })
      }
    );
  }
);
ExperimentalCurrencyInput.displayName = "ExperimentalCurrencyInput";
export {
  ExperimentalCurrencyInput
};
