"use strict";

import { View } from "react-native";
import { useIOTheme } from "../../context";
import { IOColors, IOVisualCostants } from "../../core";
import { jsx as _jsx } from "react/jsx-runtime";
export const Stepper = ({
  steps,
  currentStep
}) => {
  const theme = useIOTheme();
  const STEPPER_SPACE = 4;
  const colorMap = {
    default: IOColors[theme["stepper-default"]],
    active: IOColors[theme["interactiveElem-default"]]
  };
  return /*#__PURE__*/_jsx(View, {
    style: {
      paddingHorizontal: IOVisualCostants.appMarginDefault
    },
    children: /*#__PURE__*/_jsx(View, {
      style: {
        flex: 1,
        flexDirection: "row",
        justifyContent: "space-between",
        gap: STEPPER_SPACE
      },
      children: [...Array(steps)].map((_, i) => /*#__PURE__*/_jsx(View, {
        style: {
          borderRadius: 2,
          borderCurve: "continuous",
          borderBottomColor: i > currentStep - 1 ? colorMap.default : colorMap.active,
          borderBottomWidth: 2,
          flex: 1
        }
      }, i))
    })
  });
};
//# sourceMappingURL=Stepper.js.map