import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { iconSize } from "../../../../../../core/design-system/index.js";
import { Spacer } from "../../../../components/Spacer.js";
import { Container, Line, ModalHeader } from "../../../../components/basic.js";
import { Button } from "../../../../components/buttons.js";
import { Text } from "../../../../components/text.js";
import { currencies } from "./currencies.js";
export function CurrencySelection(props) {
    return (_jsxs(Container, { children: [_jsx(Container, { p: "lg", children: _jsx(ModalHeader, { title: "Select Currency", onBack: props.onBack }) }), _jsx(Line, {}), _jsx(Spacer, { y: "lg" }), _jsx(Container, { flex: "column", gap: "xs", px: "md", children: currencies.map((c) => {
                    return (_jsxs(Button, { fullWidth: true, variant: "ghost", onClick: () => props.onSelect(c), gap: "sm", children: [_jsx(c.icon, { size: iconSize.lg }), _jsxs(Container, { flex: "column", gap: "xxs", children: [_jsx(Text, { color: "primaryText", children: c.shorthand }), _jsx(Text, { children: c.name })] })] }, c.shorthand));
                }) }), _jsx(Spacer, { y: "lg" })] }));
}
//# sourceMappingURL=CurrencySelection.js.map