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 Dot = styled.div`
  ${({
  theme: {
    yoga: {
      components: { stepper }
    }
  }
}) => css`
    width: 15px;
    height: 15px;

    border-radius: ${stepper.dot.radius}px;
  `}
`;
const Label = styled(Text.Overline)`
  width: 95px;

  transform: translateX(-50%);
`;
const DotWrapper = styled.div`
  ${({
  active,
  secondary,
  theme: {
    yoga: {
      components: { stepper }
    }
  }
}) => {
  const state = secondary ? "secondary" : "active";
  return css`
      position: relative;
      width: 15px;

      text-align: center;

      ${Label} {
        position: absolute;
        left: 50%;
        top: 10px;

        color: ${active ? stepper.label.color[state] : stepper.label.color.inactive};
      }

      ${Dot} {
        position: absolute;
        top: -10px;

        background-color: ${active ? stepper.dot.backgroundColor[state] : stepper.dot.backgroundColor.inactive};
      }
    `;
}}
`;
const Wrapper = styled.div`
  display: flex;
  justify-content: space-between;
`;
const emptyArr = [];
function Dots({ activeStep = 0, labels = emptyArr, secondary = false }) {
  return /* @__PURE__ */ jsx(Wrapper, { children: labels.map((label, index) => /* @__PURE__ */ jsxs(
    DotWrapper,
    {
      active: activeDot(index, activeStep),
      secondary,
      children: [
        /* @__PURE__ */ jsx(Dot, {}),
        /* @__PURE__ */ jsx(Label, { as: "span", children: label })
      ]
    },
    label
  )) });
}
Dots.propTypes = {
  activeStep: number,
  labels: arrayOf(string),
  secondary: bool
};
var Dots_default = Dots;
export {
  Dots_default as default
};
