'use client';

import { cn } from "../../utils/cn.mjs";
import { Modes } from "./types.mjs";
import { useState } from "react";
import { CircleDashed, Moon, Sun } from "lucide-react";
import { jsx, jsxs } from "react/jsx-runtime";

//#region src/components/ThemeSwitcherDropDown/MobileThemeSwitcher.tsx
const getIconStyle = ({ isCurrentMode, isNextMode }) => cn(`absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2`, `opacity-0 transition-opacity duration-300 ease-in-out`, isCurrentMode && `opacity-100 group-hover:opacity-0`, isNextMode && `group-hover:opacity-100`);
const MobileThemeSwitcher = ({ theme, systemTheme, setTheme }) => {
	const isThemeSystemTheme = systemTheme === theme;
	const [mode, setMode] = useState(isThemeSystemTheme ? Modes.system : theme);
	const nextMode = mode === Modes.system ? theme === Modes.dark ? Modes.light : Modes.dark : isThemeSystemTheme ? Modes.system : mode === Modes.light ? Modes.dark : Modes.light;
	const toggleMode = () => {
		if (nextMode === Modes.system) setTheme(systemTheme ?? Modes.light);
		else setTheme(nextMode);
		setMode(nextMode);
	};
	return /* @__PURE__ */ jsxs("button", {
		className: "group relative size-10",
		"aria-label": "Theme selector",
		children: [
			/* @__PURE__ */ jsx(CircleDashed, {
				className: getIconStyle({
					isCurrentMode: mode === Modes.system,
					isNextMode: nextMode === Modes.system
				}),
				onClick: toggleMode,
				"data-mode": "system"
			}),
			/* @__PURE__ */ jsx(Moon, {
				className: getIconStyle({
					isCurrentMode: mode === Modes.light,
					isNextMode: nextMode === Modes.light
				}),
				onClick: toggleMode,
				"data-mode": "light"
			}),
			/* @__PURE__ */ jsx(Sun, {
				className: getIconStyle({
					isCurrentMode: mode === Modes.dark,
					isNextMode: nextMode === Modes.dark
				}),
				onClick: toggleMode,
				"data-mode": "dark"
			})
		]
	});
};

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