import {
  CodeObjectSmall,
  DesignSmall,
  RenameSmall,
  SparklesFilledSmall
} from "@wix/wix-ui-icons-common";
import classNames from "classnames";
import React from "react";
import classes from "./loader-scss.js";
const Loader = () => {
  return /* @__PURE__ */ React.createElement("div", { className: classes.root }, /* @__PURE__ */ React.createElement("div", { className: classes.leftSide }, /* @__PURE__ */ React.createElement(Line, null), /* @__PURE__ */ React.createElement(Circle, null)), /* @__PURE__ */ React.createElement("div", { className: classes.scroller, "data-animated": "true" }, /* @__PURE__ */ React.createElement("div", { className: classes.scrollerInner }, [...SCROLL_ITEMS, ...SCROLL_ITEMS].map((item, index) => /* @__PURE__ */ React.createElement(ScrollItem, { key: index, width: item.width, arrowPosition: item.arrowPosition })))));
};
const SCROLL_ITEMS = [
  { width: "75%" },
  { width: "100%" },
  { width: "75%", arrowPosition: "right" },
  { width: "100%" },
  { width: "75%" },
  { width: "100%", arrowPosition: "left" }
];
const ScrollItem = ({ width, arrowPosition }) => {
  if (!arrowPosition) {
    return /* @__PURE__ */ React.createElement(Bar, { width });
  }
  return /* @__PURE__ */ React.createElement("div", { style: { display: "flex", gap: "8px", alignItems: "center" } }, arrowPosition === "left" && /* @__PURE__ */ React.createElement(Arrow, { direction: "left" }), /* @__PURE__ */ React.createElement(Bar, { width }), arrowPosition === "right" && /* @__PURE__ */ React.createElement(Arrow, { direction: "right" }));
};
const Bar = ({ width }) => {
  return /* @__PURE__ */ React.createElement(
    "div",
    {
      style: {
        width,
        height: "13px",
        borderRadius: "1000px",
        background: "linear-gradient(90deg, #d6e6fe 0%, #e7f0ff 100%)"
      }
    }
  );
};
const Arrow = ({
  direction = "right",
  ...props
}) => {
  return /* @__PURE__ */ React.createElement(
    "svg",
    {
      xmlns: "http://www.w3.org/2000/svg",
      width: "7",
      height: "8",
      viewBox: "0 0 7 8",
      fill: "none",
      style: {
        transform: direction === "left" ? "rotate(180deg)" : "none"
      },
      ...props
    },
    /* @__PURE__ */ React.createElement(
      "path",
      {
        d: "M6.35205 2.816L5.10216e-05 0V1.456L5.23205 3.68L5.10216e-05 5.904V7.424L6.35205 4.592V2.816Z",
        fill: "#116DFF"
      }
    )
  );
};
const Circle = () => {
  const [currentIndex, setCurrentIndex] = React.useState(0);
  React.useEffect(() => {
    const interval = setInterval(() => {
      setCurrentIndex((prevIndex) => (prevIndex + 1) % ICONS.length);
    }, 1500);
    return () => clearInterval(interval);
  }, []);
  return /* @__PURE__ */ React.createElement(
    "div",
    {
      style: {
        width: "30px",
        height: "30px",
        borderRadius: "50%",
        background: "linear-gradient(45deg, #A8CAFF 0%, #FFF 100%)",
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        position: "relative"
      }
    },
    ICONS.map((Icon, index) => /* @__PURE__ */ React.createElement(
      Icon,
      {
        key: index,
        className: classNames(classes.icon, index === currentIndex && classes.visible)
      }
    ))
  );
};
const ICONS = [SparklesFilledSmall, DesignSmall, RenameSmall, CodeObjectSmall];
const Line = () => {
  return /* @__PURE__ */ React.createElement("div", { className: classes.line });
};
export {
  Loader
};
//# sourceMappingURL=loader.js.map
