import { j as jsxRuntimeExports } from "../../../../../_virtual/jsx-runtime.js";
import { tx as D, css as E } from "../../../../style-system/dist/twind.js";
import { useState, useRef, useEffect } from "react";
function ThemesPreviewList({ themes }) {
  const [themeIndex, setThemeIndex] = useState(0);
  const conicRef = useRef(null);
  const containerRef = useRef(null);
  const theme = themes[themeIndex];
  useEffect(() => {
    containerRef.current?.style.setProperty("background-color", theme.colors.base200);
    conicRef.current?.style.setProperty(
      "background-image",
      `conic-gradient(from 0deg, ${theme.colors.primary}, ${theme.colors.secondary}, ${theme.colors.accent}, ${theme.colors.primary})`
    );
  }, [theme]);
  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
    "div",
    {
      ref: containerRef,
      className: D(
        "w-full flex justify-center items-center h-full relative overflow-hidden animate-background bg-size[400%] opacity-50"
      ),
      children: [
        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref: conicRef, className: D("absolute w-[100vh] h-[100vh] inset-0 animate-spin-blob z-20") }),
        /* @__PURE__ */ jsxRuntimeExports.jsx(
          "div",
          {
            className: D(
              "rounded-full absolute backdrop-blur-3xl inset-0 scale-150 bg-white/40 z-50 flex items-center justify-center",
              E({
                textShadow: `0 0 3px rgba(0, 0, 0, 0.3)`,
                color: "#FFFFFF",
                fontSize: "1.2rem",
                fontWeight: "bold",
                transition: "color 0.3s ease, background-color 0.3s ease"
              })
            ),
            children: theme.name
          }
        )
      ]
    }
  );
}
export {
  ThemesPreviewList as default
};
//# sourceMappingURL=ThemesPreviewList.js.map
