import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React from "react";
import { Row } from "../grid";
import Input from "../input";
import Select from "../select";
const InputToken = ({ tokens, dpLimit, ...props }) => {
    const [amount, setAmount] = React.useState("");
    const [token, setToken] = React.useState(tokens?.[0] ?? "");
    React.useEffect(() => {
        props.onChange && props.onChange(amount, token);
    }, [amount, token]);
    return (_jsxs(Row, { style: {
            alignItems: "flex-end",
            ...props.rowStyle,
        }, children: [_jsx(Input, { title: props.title, placeholder: "0", value: amount, onChange: setAmount, error: props.error, width: props.inputWidth ?? "152px", theme: { wrapperMargin: "0 8px 0 0", ...props.inputTheme }, amount: true, dpLimit: dpLimit }), _jsx(Select, { onSelect: (val) => setToken(val), width: props.selectWidth ?? "96px", theme: { wrapperPadding: "0 0 22px 0", ...props.selectTheme }, children: tokens?.map((token) => (_jsx(Select.Option, { style: { color: "#002445" }, children: token.toUpperCase() }, token))) })] }));
};
export default InputToken;
//# sourceMappingURL=index.js.map