"use client";
import { jsx, jsxs } from "react/jsx-runtime";
import * as React from "react";
import { Moon, Sun } from "lucide-react";
import { useTheme } from "./ThemeProvider.js";
import { useT } from "@open-mercato/shared/lib/i18n/context";
import { cn } from "@open-mercato/shared/lib/utils";
function ThemeToggle({ className }) {
  const { resolvedTheme, setTheme } = useTheme();
  const t = useT();
  const [mounted, setMounted] = React.useState(false);
  React.useEffect(() => {
    setMounted(true);
  }, []);
  const isDark = resolvedTheme === "dark";
  const toggleLabel = t("common.theme.toggle", "Toggle theme");
  const toggle = () => {
    setTheme(isDark ? "light" : "dark");
  };
  if (!mounted) {
    return /* @__PURE__ */ jsx(
      "div",
      {
        className: cn(
          "relative flex h-7 w-14 items-center rounded-full bg-muted p-1",
          className
        ),
        "aria-hidden": "true",
        children: /* @__PURE__ */ jsxs("div", { className: "flex w-full justify-between px-1", children: [
          /* @__PURE__ */ jsx(Sun, { className: "size-3.5 text-muted-foreground" }),
          /* @__PURE__ */ jsx(Moon, { className: "size-3.5 text-muted-foreground" })
        ] })
      }
    );
  }
  return /* @__PURE__ */ jsxs(
    "button",
    {
      type: "button",
      role: "switch",
      "aria-checked": isDark,
      "aria-label": toggleLabel,
      onClick: toggle,
      className: cn(
        "relative flex h-7 w-14 cursor-pointer items-center rounded-full p-1 transition-colors",
        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
        isDark ? "bg-primary" : "bg-muted",
        className
      ),
      children: [
        /* @__PURE__ */ jsx(
          "span",
          {
            className: cn(
              "absolute size-5 rounded-full bg-background shadow-sm transition-transform duration-200 motion-reduce:transition-none",
              isDark ? "translate-x-7" : "translate-x-0"
            )
          }
        ),
        /* @__PURE__ */ jsxs("span", { className: "relative flex w-full justify-between px-0.5", children: [
          /* @__PURE__ */ jsx(
            Sun,
            {
              className: cn(
                "size-3.5 transition-colors motion-reduce:transition-none",
                isDark ? "text-muted-foreground" : "text-amber-500"
              )
            }
          ),
          /* @__PURE__ */ jsx(
            Moon,
            {
              className: cn(
                "size-3.5 transition-colors motion-reduce:transition-none",
                isDark ? "text-primary-foreground" : "text-muted-foreground"
              )
            }
          )
        ] }),
        /* @__PURE__ */ jsx("span", { className: "sr-only", children: isDark ? t("common.theme.dark", "Dark") : t("common.theme.light", "Light") })
      ]
    }
  );
}
export {
  ThemeToggle
};
//# sourceMappingURL=ThemeToggle.js.map
