import React from "react";
import * as RadixSelect from "@radix-ui/react-select";
import { CaretDownIcon } from "@phosphor-icons/react";
import * as styles from "./styles";
export const Select = ({ name, items, onChange, disabled, placeholder = "", }) => {
    return (React.createElement(RadixSelect.Root, { onValueChange: (value) => onChange(value) },
        React.createElement(RadixSelect.Trigger, { id: name, "data-testid": `select-${name}`, className: styles.trigger, disabled: disabled },
            React.createElement(RadixSelect.Value, { placeholder: placeholder }),
            React.createElement(RadixSelect.Icon, { asChild: true },
                React.createElement(CaretDownIcon, { className: styles.icon, size: 20 }))),
        React.createElement(RadixSelect.Portal, null,
            React.createElement(RadixSelect.Content, { className: styles.content, position: "popper" },
                React.createElement(RadixSelect.Viewport, { className: styles.contentViewport }, items.map((item) => (React.createElement(RadixSelect.Item, { "data-testid": `select-${name}-item-${item.value}`, "data-value": item.value, className: styles.item, key: item.value, value: item.value },
                    React.createElement(RadixSelect.ItemText, null, item.label)))))))));
};
//# sourceMappingURL=index.js.map