import React from "react";
import * as RadixSelect from "@radix-ui/react-select";
import { CaretDownIcon, PersonSimpleWalkIcon, CarIcon, BicycleIcon, } from "@phosphor-icons/react";
import { useTranslation } from "react-i18next";
import * as styles from "./styles";
const options = ["walking", "driving", "cycling"];
const icons = {
    walking: React.createElement(PersonSimpleWalkIcon, { size: 16 }),
    driving: React.createElement(CarIcon, { size: 16 }),
    cycling: React.createElement(BicycleIcon, { size: 16 }),
};
export const Select = ({ name, selected = options[0], onChange, disabled, }) => {
    const { t } = useTranslation("localContent");
    return (React.createElement(RadixSelect.Root, { value: selected, onValueChange: (value) => onChange(value) },
        React.createElement(RadixSelect.Trigger, { id: name, "data-testid": `select-${name}`, className: styles.trigger, disabled: disabled },
            React.createElement(RadixSelect.Value, { placeholder: t(`commute.travelTypes.${selected}`) }, icons[selected]),
            React.createElement(RadixSelect.Icon, { asChild: true },
                React.createElement(CaretDownIcon, { className: styles.icon, size: 20 }))),
        React.createElement(RadixSelect.Content, { className: styles.content, align: "start", sticky: "always" },
            React.createElement(RadixSelect.Viewport, { className: styles.contentViewport },
                React.createElement(React.Fragment, null, options.map((value) => (React.createElement(RadixSelect.Item, { className: styles.item, key: value, value: value },
                    React.createElement(RadixSelect.Icon, null, icons[value]),
                    React.createElement(RadixSelect.ItemText, null, t(`commute.travelTypes.${value}`))))))))));
};
//# sourceMappingURL=index.js.map