import { CircleArrow } from "@/components/ui";
import { useDynamicSize } from "@/hooks/DOM/useDynamicSize";

import styles from "./StepperBar.module.scss";

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={"compatibility-v2"}
      />
    </div>
  );
}

export default StepperBar;
