import { j as r } from "../../../../../_virtual/jsx-runtime.js";
import { tx as t, css as l } from "../../../../style-system/dist/twind.js";
import { useState as i, useRef as n, useEffect as m } from "react";
function h({ themes: c }) {
  const [a, u] = i(0), o = n(null), s = n(null), e = c[a];
  return m(() => {
    s.current?.style.setProperty("background-color", e.colors.base200), o.current?.style.setProperty(
      "background-image",
      `conic-gradient(from 0deg, ${e.colors.primary}, ${e.colors.secondary}, ${e.colors.accent}, ${e.colors.primary})`
    );
  }, [e]), /* @__PURE__ */ r.jsxs(
    "div",
    {
      ref: s,
      className: t(
        "w-full flex justify-center items-center h-full relative overflow-hidden animate-background bg-size[400%] opacity-50"
      ),
      children: [
        /* @__PURE__ */ r.jsx("div", { ref: o, className: t("absolute w-[100vh] h-[100vh] inset-0 animate-spin-blob z-20") }),
        /* @__PURE__ */ r.jsx(
          "div",
          {
            className: t(
              "rounded-full absolute backdrop-blur-3xl inset-0 scale-150 bg-white/40 z-50 flex items-center justify-center",
              l({
                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: e.name
          }
        )
      ]
    }
  );
}
export {
  h as default
};
//# sourceMappingURL=ThemesPreviewList.js.map
