"use client";
import { jsx as t, jsxs as h } from "react/jsx-runtime";
import { useControllableState as p } from "../../node_modules/@radix-ui/react-use-controllable-state/dist/index.js";
import { useState as b, useEffect as g } from "react";
import { cn as r } from "../../lib/utils.js";
import v from "../../node_modules/lucide-react/dist/esm/icons/monitor.js";
import x from "../../node_modules/lucide-react/dist/esm/icons/sun.js";
import y from "../../node_modules/lucide-react/dist/esm/icons/moon.js";
const k = [
  {
    key: "system",
    icon: v,
    label: "System theme"
  },
  {
    key: "light",
    icon: x,
    label: "Light theme"
  },
  {
    key: "dark",
    icon: y,
    label: "Dark theme"
  }
], z = ({
  value: l,
  onChange: n,
  defaultValue: s,
  className: i
}) => {
  const [m, a] = p({
    defaultProp: s || "system",
    prop: l,
    onChange: n
  }), [u, d] = b(!1);
  return g(() => {
    d(!0);
  }, []), u ? /* @__PURE__ */ t(
    "div",
    {
      className: r(
        "bg-d-background ring-d-border relative isolate flex h-8 rounded-full p-1 ring-1",
        i
      ),
      children: k.map(({ key: e, icon: c, label: f }) => {
        const o = m === e;
        return /* @__PURE__ */ h(
          "button",
          {
            type: "button",
            className: "relative h-6 w-6 rounded-full",
            onClick: () => a(e),
            "aria-label": f,
            children: [
              o && /* @__PURE__ */ t("div", { className: "bg-d-secondary absolute inset-0 rounded-full" }),
              /* @__PURE__ */ t(
                c,
                {
                  className: r(
                    "relative z-10 m-auto h-4 w-4",
                    o ? "text-d-foreground" : "text-d-muted-foreground"
                  )
                }
              )
            ]
          },
          e
        );
      })
    }
  ) : null;
};
export {
  z as ThemeSwitcher
};
