'use client';

import { Container } from "../Container/index.mjs";
import { Button, ButtonVariant } from "../Button/Button.mjs";
import { DropDown } from "../DropDown/index.mjs";
import { Modes } from "./types.mjs";
import { CircleDashed, Moon, Sun } from "lucide-react";
import { useState } from "react";
import { jsx, jsxs } from "react/jsx-runtime";

//#region src/components/ThemeSwitcherDropDown/DesktopThemeSwitcher.tsx
const ButtonItem = ({ Icon, children, ...props }) => /* @__PURE__ */ jsx("div", {
	className: "relative w-full p-0.5",
	children: /* @__PURE__ */ jsx(Button, {
		className: "w-full cursor-pointer rounded-lg p-1 text-left hover:bg-text/10 focus:bg-text-opposite/20 focus:outline-hidden disabled:text-white/25",
		Icon,
		"data-mode": "system",
		role: "option",
		variant: ButtonVariant.NONE,
		...props,
		children
	})
});
const DesktopThemeSwitcher = ({ theme, setTheme, systemTheme }) => {
	const [mode, setMode] = useState(systemTheme === theme ? Modes.system : theme);
	const switchMode = (mode$1) => {
		if (mode$1 === Modes.system) setTheme(systemTheme ?? Modes.light);
		else setTheme(mode$1);
		setMode(mode$1);
	};
	const panelIdentifier = "theme-switcher";
	return /* @__PURE__ */ jsxs(DropDown, {
		identifier: panelIdentifier,
		children: [/* @__PURE__ */ jsxs(DropDown.Trigger, {
			className: "p-2",
			identifier: panelIdentifier,
			"aria-label": "Theme selector",
			children: [
				mode === Modes.system && /* @__PURE__ */ jsx(CircleDashed, { "data-mode": "system" }),
				mode === Modes.light && /* @__PURE__ */ jsx(Sun, { "data-mode": "light" }),
				mode === Modes.dark && /* @__PURE__ */ jsx(Moon, { "data-mode": "dark" })
			]
		}), /* @__PURE__ */ jsx(DropDown.Panel, {
			identifier: panelIdentifier,
			isFocusable: true,
			isOverable: true,
			children: /* @__PURE__ */ jsxs(Container, {
				className: "min-w-[100px] items-start p-1",
				separator: "y",
				children: [
					/* @__PURE__ */ jsx(ButtonItem, {
						Icon: CircleDashed,
						onClick: () => switchMode(Modes.system),
						isActive: mode === Modes.system,
						label: "Restore to system mode",
						children: "System"
					}),
					/* @__PURE__ */ jsx(ButtonItem, {
						Icon: Sun,
						onClick: () => switchMode(Modes.light),
						isActive: mode === Modes.light,
						label: "Switch to light mode",
						children: "Light"
					}),
					/* @__PURE__ */ jsx(ButtonItem, {
						Icon: Moon,
						onClick: () => switchMode(Modes.dark),
						isActive: mode === Modes.dark,
						label: "Switch to dark mode",
						children: "Dark"
					})
				]
			})
		})]
	});
};

//#endregion
export { DesktopThemeSwitcher };
//# sourceMappingURL=DesktopThemeSwitcher.mjs.map