"use client";
import { jsxs, jsx } from "../../packages/jsx/src/jsx-runtime.js";
import { keyframes } from "@emotion/react";
const ringCount = 6;
const ringSize = 200;
const dotSize = 2;
const animationSpin = keyframes({
  from: { transform: "translate(-50%, -50%) rotate(0deg)" },
  to: { transform: "translate(-50%, -50%) rotate(360deg)" }
});
function DottedRingsSpinner({ children, ...rest }) {
  return /* @__PURE__ */ jsxs(
    "article",
    {
      ...rest,
      sx: {
        "--size": ringSize + "px",
        width: "var(--size)",
        height: "var(--size)"
      },
      children: [
        Array.from({ length: ringCount }, (_, i) => {
          const dotCount = 12 + (ringCount - i + 2) * 8;
          return /* @__PURE__ */ jsx(
            "div",
            {
              sx: {
                position: "absolute",
                top: "50%",
                left: "50%",
                width: `${(i + 1) * 20}%`,
                height: `${(i + 1) * 20}%`,
                animation: `${animationSpin} calc(96s * (1 - ${i} * 0.16)) linear infinite`,
                transformOrigin: "center",
                opacity: 0.32 - i * 0.04
              },
              style: {
                "--radius": `calc(var(--size) * (1 - ${i + 2} * 0.075))`
              },
              children: Array.from({ length: dotCount * 10 }).map((_2, j) => /* @__PURE__ */ jsx(
                Dot,
                {
                  rotation: 360 / dotCount * j,
                  size: dotSize
                },
                j
              ))
            },
            i
          );
        }),
        /* @__PURE__ */ jsx(
          "div",
          {
            sx: {
              position: "absolute",
              top: "50%",
              left: "50%",
              transform: "translate(-50%, -50%)"
            },
            children
          }
        )
      ]
    }
  );
}
function Dot({ rotation, size }) {
  return /* @__PURE__ */ jsx(
    "div",
    {
      sx: {
        position: "absolute",
        background: "white",
        borderRadius: "50%",
        top: `calc(50% - ${size}px / 2)`,
        left: `calc(50% - ${size}px / 2)`
      },
      style: {
        width: size,
        height: size,
        transform: `rotate(${rotation}deg) translate(
          calc(var(--radius) / 2))`
      }
    }
  );
}
export {
  DottedRingsSpinner
};
