import { jsxs, jsx } from "react/jsx-runtime";
import { a as tx, c as css } from "./twind.DdSZmZu6.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__ */ jsxs(
    "div",
    {
      ref: containerRef,
      className: tx(
        "w-full flex justify-center items-center h-full relative overflow-hidden animate-background bg-size[400%] opacity-50"
      ),
      children: [
        /* @__PURE__ */ jsx("div", { ref: conicRef, className: tx("absolute w-[100vh] h-[100vh] inset-0 animate-spin-blob z-20") }),
        /* @__PURE__ */ jsx(
          "div",
          {
            className: tx(
              "rounded-full absolute backdrop-blur-3xl inset-0 scale-150 bg-white/40 z-50 flex items-center justify-center",
              css({
                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.BiyqScWL.js.map
