"use client";
'use strict';

const jsxRuntime = require('react/jsx-runtime');
const React = require('react');
const utils = require('../../../../../lib/utils.cjs');
const layerStore = require('../../../../../lib/ui-builder/store/layer-store.cjs');
const baseColors = require('../../utils/base-colors.cjs');

const THEME_COLOR_PREFIXES = ["bg-", "text-", "border-", "shadow-"];
function ThemeAwareDropdownOption({
  color,
  children
}) {
  const selectedPageId = layerStore.useLayerStore((state) => state.selectedPageId);
  const findLayerById = layerStore.useLayerStore((state) => state.findLayerById);
  const selectedPageData = findLayerById(selectedPageId);
  const currentTheme = selectedPageData?.props?.["data-color-theme"];
  const currentMode = selectedPageData?.props?.["data-mode"] || "light";
  const getResolvedColor = (colorClass) => {
    if (!colorClass) {
      return void 0;
    }
    let themeColorKey;
    for (const prefix of THEME_COLOR_PREFIXES) {
      if (colorClass.startsWith(prefix)) {
        themeColorKey = colorClass.substring(prefix.length);
        break;
      }
    }
    if (themeColorKey && currentTheme) {
      try {
        const themeData = baseColors.baseColors.find((theme) => theme.name === currentTheme);
        if (themeData?.cssVars) {
          const modeColors = themeData.cssVars[currentMode];
          if (modeColors) {
            const colorValue = modeColors[themeColorKey];
            if (colorValue) {
              const hslColor = `hsl(${colorValue})`;
              return hslColor;
            }
          }
        }
      } catch (error) {
        console.warn(`Failed to resolve theme color for ${colorClass}:`, error);
      }
    }
    return void 0;
  };
  const resolvedColor = getResolvedColor(color);
  const style = React.useMemo(() => ({ backgroundColor: resolvedColor }), [resolvedColor]);
  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-row items-center justify-start text-center w-full", children: [
    color && /* @__PURE__ */ jsxRuntime.jsx(
      "span",
      {
        className: utils.cn(
          "inline-block size-[14px] rounded-full border border-border mr-1",
          // Use resolved color as inline style if available, otherwise fall back to class
          !resolvedColor && color
        ),
        style: resolvedColor ? style : void 0
      }
    ),
    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground", children })
  ] });
}

exports.ThemeAwareDropdownOption = ThemeAwareDropdownOption;
