import React from "react";
import * as RadixSelect from "@radix-ui/react-select";
import { BackpackIcon } from "@phosphor-icons/react";
import { Content } from "./Content";
import { Item } from "./Item";
import { Trigger } from "./Trigger";
import * as styles from "./styles";
export const Filter = ({ options, activeFilter, allLabel, label, icon: Icon = BackpackIcon, handleFilterChange, }) => {
    var _a;
    const filterOptions = [{ label: allLabel, value: "ALL" }, ...options];
    const selectedValue = activeFilter !== null && activeFilter !== void 0 ? activeFilter : "ALL";
    return (React.createElement("div", null,
        React.createElement("label", { className: styles.label, "data-testid": `filter-label-${label}`, htmlFor: `filter-select-${label}` }, label),
        options && (React.createElement("div", { className: styles.filter },
            React.createElement(RadixSelect.Root, { value: selectedValue, onValueChange: (value) => handleFilterChange(value === "ALL" ? undefined : value) },
                React.createElement(Trigger, { size: "large", id: `filter-select-${label}` },
                    React.createElement(Icon, { className: styles.icon }),
                    React.createElement("p", { className: styles.item }, (_a = filterOptions.find((option) => option.value === selectedValue)) === null || _a === void 0 ? void 0 : _a.label)),
                React.createElement(Content, null, filterOptions.map((option) => (React.createElement(Item, { key: option.value, value: option.value, variant: "light" },
                    React.createElement("p", { className: styles.item }, option.label))))))))));
};
//# sourceMappingURL=index.js.map