import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useId } from "react";
import { Label } from "../../cmp/label";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "../../cmp/select";
import { useTheme } from "../Provider";
export function PolarityPicker() {
    const id = useId();
    const { themePolarity, setThemePolarity } = useTheme();
    return (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { htmlFor: id, children: "Polarity" }), _jsxs(Select, { value: themePolarity, onValueChange: (value) => setThemePolarity(value), children: [_jsx(SelectTrigger, { id: id, className: "w-65", children: _jsx(SelectValue, { children: themePolarity === "system"
                                ? "System"
                                : themePolarity === "dark"
                                    ? "Dark"
                                    : "Light" }) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "system", children: "System" }), _jsx(SelectItem, { value: "dark", children: "Dark" }), _jsx(SelectItem, { value: "light", children: "Light" })] })] })] }));
}
