import React from "react";
import styled from "styled-components";
import Text from "../../../asorted/Text";
const Container = styled.div `
  display: flex;
  flex-direction: row;
  height: 24px;
  align-items: center;
`;
const Bar = styled.div `
  transition: all 600ms linear;
  height: 4px;
  border-radius: 2px;
  /* Disable left/right border radius to match the handler */
  border-top-${p => (p.on ? "right" : "left")}-radius: 0;
  border-bottom-${p => (p.on ? "right" : "left")}-radius: 0;
  flex: ${p => p.fill};
  background: ${p => (p.on ? p.theme.colors.neutral.c100 : p.theme.colors.neutral.c40)};
`;
const Handler = styled.div `
  transition: all 600ms linear;
  padding: 4px;
  background: ${p => p.theme.colors.neutral.c100};
  border-radius: ${p => `${p.theme.radii[1]}px`};

  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: 6px;

  & span.index {
    display: flex;
    border-radius: 2px;
    height: 16px;
    width: 16px;
    justify-content: center;
    align-items: center;
    color: ${p => p.theme.colors.neutral.c100};
    background: ${p => p.theme.colors.neutral.c00};
  }
`;
const Onboarding = ({ steps, currentIndex }) => {
    const currentStep = steps[currentIndex];
    const fill = ((currentIndex / (steps.length - 1)) * 100).toFixed(2);
    return (React.createElement(Container, null,
        React.createElement(Bar, { on: true, fill: fill }),
        React.createElement(Handler, { key: currentStep.key },
            React.createElement(Text, { className: "index", color: "neutral.c00", fontWeight: "medium", variant: "micro" }, currentIndex + 1),
            React.createElement(Text, { color: "neutral.c00", fontWeight: "medium", textTransform: "uppercase", variant: "micro" }, currentStep.label)),
        React.createElement(Bar, { fill: 100 - Number(fill) })));
};
export default Onboarding;
//# sourceMappingURL=Onboarding.js.map