import {
  Flex
} from "./chunk-25HMMI7R.js";

// src/molecules/dot-navigation.tsx
import { useCallback, useEffect, useState } from "react";
import { DotFilledIcon } from "@radix-ui/react-icons";
import { jsx } from "react/jsx-runtime";
function DotNavigation(props) {
  const { dotCount, onClick, dotIndex, defaultDotIndex, onChangeDotIndex } = props;
  const [currentDot, setCurrentDot] = useState(
    () => {
      var _a;
      return (_a = defaultDotIndex != null ? defaultDotIndex : dotIndex) != null ? _a : 0;
    }
  );
  const onClickDot = useCallback(
    (i) => {
      if (onClick) {
        onClick(i);
      } else {
        setCurrentDot(i);
      }
    },
    [onClick]
  );
  useEffect(() => {
    onChangeDotIndex == null ? void 0 : onChangeDotIndex(currentDot);
  }, [currentDot, onChangeDotIndex]);
  useEffect(() => {
    if (typeof dotIndex === "undefined") return;
    setCurrentDot(dotIndex);
  }, [dotIndex]);
  return /* @__PURE__ */ jsx(Flex, { children: dotCount ? Array.from({ length: dotCount }, (_, i) => i).map((_, index) => {
    const isSelected = currentDot === index;
    return /* @__PURE__ */ jsx(
      DotFilledIcon,
      {
        height: "24px",
        onClick: () => {
          onClickDot(index);
        },
        opacity: isSelected ? void 0 : 0.25,
        style: {
          cursor: "pointer"
        },
        width: "24px"
      },
      index
    );
  }) : null });
}

export {
  DotNavigation
};
//# sourceMappingURL=chunk-IJOOKMKQ.js.map