"use client";
import { jsxs, jsx } from "react/jsx-runtime";
import { useState, useEffect } from "react";
import { Button } from "../../ui/button.js";
import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem } from "../../ui/dropdown-menu.js";
import { useColorMode } from "./use-color-mode.js";
import { cn } from "../../../lib/utils.js";
import Monitor from "../../../node_modules/lucide-react/dist/esm/icons/monitor.js";
import Sun from "../../../node_modules/lucide-react/dist/esm/icons/sun.js";
import Moon from "../../../node_modules/lucide-react/dist/esm/icons/moon.js";
const iconSizeMap = {
  xs: "icon-xs",
  sm: "icon-sm",
  default: "icon",
  lg: "icon-lg"
};
const iconClassMap = {
  xs: "size-3",
  sm: "size-3.5",
  default: "size-4",
  lg: "size-5"
};
const textClassMap = {
  xs: "text-xs",
  sm: "text-sm",
  default: "text-base",
  lg: "text-lg"
};
function ColorModeToggle({
  variant = "outline",
  size = "default",
  className,
  showLabel = false,
  align = "end",
  ...props
}) {
  const buttonSize = showLabel ? size : iconSizeMap[size];
  const iconClass = iconClassMap[size];
  const textClass = textClassMap[size];
  const { preference, setPreference } = useColorMode();
  const [mounted, setMounted] = useState(false);
  useEffect(() => setMounted(true), []);
  const items = [
    { mode: "system", Icon: Monitor, label: "System" },
    { mode: "light", Icon: Sun, label: "Light" },
    { mode: "dark", Icon: Moon, label: "Dark" }
  ];
  const currentItem = mounted ? items.find((item) => item.mode === preference) || items[0] : items[0];
  return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
    /* @__PURE__ */ jsx(
      DropdownMenuTrigger,
      {
        render: /* @__PURE__ */ jsxs(
          Button,
          {
            variant,
            size: buttonSize,
            className: cn(className),
            suppressHydrationWarning: true,
            ...props,
            children: [
              currentItem && /* @__PURE__ */ jsx(currentItem.Icon, { className: iconClass }),
              showLabel && /* @__PURE__ */ jsx("span", { className: textClass, children: currentItem?.label }),
              /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Toggle color mode" })
            ]
          }
        )
      }
    ),
    /* @__PURE__ */ jsx(DropdownMenuContent, { align, children: items.map((item) => /* @__PURE__ */ jsxs(
      DropdownMenuItem,
      {
        onClick: () => setPreference(item.mode),
        className: "flex items-center gap-2",
        children: [
          /* @__PURE__ */ jsx(item.Icon, { className: "size-4" }),
          /* @__PURE__ */ jsx("span", { children: item.label }),
          preference === item.mode && /* @__PURE__ */ jsx("span", { className: "ml-auto text-xs opacity-60", children: "✓" })
        ]
      },
      item.mode
    )) })
  ] });
}
export {
  ColorModeToggle
};
//# sourceMappingURL=color-mode-toggle.js.map
