import { j as s } from "../../../../../_virtual/jsx-runtime.js";
import { tx as n, css as l } from "../../../../style-system/dist/twind.js";
import { useState as i, useRef as u, useEffect as m } from "react";
import { useImagesSearchResults as x } from "../../../../../use-editor.js";
function j({ themes: t }) {
  const [d, f] = i(0), [g, b] = i(0), a = u(null), c = u(null), r = x(), e = t[d];
  return m(() => {
    const h = setInterval(() => {
      f((o) => (o + 1) % t.length), r?.length && b((o) => (o + 1) % r.length);
    }, 1e4);
    return () => clearInterval(h);
  }, [t, r]), m(() => {
    c.current?.style.setProperty("background-color", e.colors.base200), a.current?.style.setProperty(
      "background-image",
      `conic-gradient(from 0deg, ${e.colors.primary}, ${e.colors.secondary}, ${e.colors.accent}, ${e.colors.primary})`
    );
  }, [e]), /* @__PURE__ */ s.jsxs(
    "div",
    {
      ref: c,
      className: n(
        "w-full flex justify-center items-center h-full relative overflow-hidden animate-background bg-size[400%] opacity-50",
        l({
          backgroundImage: r ? `url(${r[g]?.url})` : "none",
          backgroundSize: "cover"
        })
      ),
      children: [
        /* @__PURE__ */ s.jsx("div", { ref: a, className: n("absolute w-[100vh] h-[100vh] inset-0 animate-spin-blob z-20") }),
        /* @__PURE__ */ s.jsx(
          "div",
          {
            className: n(
              "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 {
  j as default
};
//# sourceMappingURL=ThemesPreviewList.js.map
