import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Computer, Moon, Sun } from "lucide-react";
import { Button } from "../button";
import { useTheme } from "./ThemeProvider";
export function ModeOption({ option, current, setTheme, icon }) {
    return (_jsx(Button, { variant: current === option ? "secondary" : "outline", size: "sm", onClick: () => setTheme(option), alt: option, children: icon }));
}
export default function ModeToggle() {
    const { setTheme } = useTheme();
    const theme = useTheme().theme;
    return (_jsxs("div", { className: "flex justify-between px-2 items-center", children: [_jsx("p", { className: "text-sm font-semibold", children: "Theme" }), _jsxs("div", { className: "flex gap-2", children: [_jsx(ModeOption, { current: theme, option: "system", setTheme: setTheme, icon: _jsx(Computer, { className: "text-muted" }) }), _jsx(ModeOption, { current: theme, option: "light", setTheme: setTheme, icon: _jsx(Sun, { className: "text-muted" }) }), _jsx(ModeOption, { current: theme, option: "dark", setTheme: setTheme, icon: _jsx(Moon, { className: "text-muted" }) })] })] }));
}
//# sourceMappingURL=ThemeSwitcher.js.map