import { jsx, jsxs } from "react/jsx-runtime";
import React from "react";
import { arrayOf, bool, number, string } from "prop-types";
import styled, { css } from "styled-components";
import Text from "../../Text";
import activeDot from "../activeDot";
const Wrapper = styled.View`
  flex-direction: row;
  justify-content: space-between;
`;
const DotWrapper = styled.View`
  width: 15px;
`;
const Dot = styled.View(
  ({
    active,
    secondary,
    theme: {
      yoga: {
        components: { stepper }
      }
    }
  }) => {
    const state = secondary ? "secondary" : "active";
    return css`
      width: 15px;
      height: 15px;
      margin-top: -6px;

      border-radius: ${stepper.dot.radius}px;
      background-color: ${active ? stepper.dot.backgroundColor[state] : stepper.dot.backgroundColor.inactive};
    `;
  }
);
const Label = styled(Text.Overline)(
  ({
    active,
    secondary,
    theme: {
      yoga: {
        components: { stepper }
      }
    }
  }) => {
    const state = secondary ? "secondary" : "active";
    return css`
      width: 95px;
      margin-top: 10px;
      margin-left: -40px;
      color: ${active ? stepper.label.color[state] : stepper.label.color.inactive};
      text-align: center;
    `;
  }
);
function Dots({ activeStep = 0, labels = [], secondary = false }) {
  return /* @__PURE__ */ jsx(Wrapper, { children: labels.map((label, index) => /* @__PURE__ */ jsxs(DotWrapper, { children: [
    /* @__PURE__ */ jsx(Dot, { active: activeDot(index, activeStep), secondary }),
    /* @__PURE__ */ jsx(Label, { active: activeDot(index, activeStep), secondary, children: label })
  ] }, label)) });
}
Dots.propTypes = {
  activeStep: number,
  labels: arrayOf(string),
  secondary: bool
};
var Dots_default = Dots;
export {
  Dots_default as default
};
