import styles from "./styles.module.scss";
import { useDynamicSize } from "@/hooks/useDynamicSize";
import CircleArrow from "@/components/pages/ABDesign/v1/ui/CircleArrow";

interface IStepperBarProps {
  length: number;
  currentStep: number;
  color?: string;
  className?: string;
}

function StepperBar({
  length,
  currentStep,
  color = "#7337A8",
  className = "",
}: IStepperBarProps) {
  const { width, elementRef } = useDynamicSize<HTMLDivElement>({});

  return (
    <div
      className={`${styles["step-container"]} ${className}`}
      ref={elementRef}
    >
      <CircleArrow
        width={width}
        value={currentStep / length}
        color={color}
        uniqueKey={"palmistry-v1"}
      />
    </div>
  );
}

export default StepperBar;
