/**
 * Copyright (c) 2023-present Plane Software, Inc. and contributors
 * SPDX-License-Identifier: AGPL-3.0-only
 * See the LICENSE file for details.
 */

import React from "react";
// helpers
import { cn } from "@plane/utils";

interface OnboardingStepIndicatorProps {
  currentStep: number;
  totalSteps: number;
}

export function OnboardingStepIndicator({ currentStep, totalSteps }: OnboardingStepIndicatorProps) {
  const renderIndicators = () => {
    const indicators = [];

    for (let i = 0; i < totalSteps; i++) {
      const isCompleted = i < currentStep;
      const isActive = i === currentStep - 1;
      const isFirstStep = i === 0;
      const isLastStep = i === totalSteps - 1;

      indicators.push(
        <div
          key={`line-${i}`}
          className={cn("-ml-0.5 h-1.5 w-full", {
            "bg-success-primary": isCompleted,
            "bg-surface-1": !isCompleted,
            "rounded-l-full": isFirstStep,
            "rounded-r-full": isLastStep || isActive,
            "z-10": isActive,
          })}
        />
      );
    }

    return indicators;
  };

  return (
    <div className="flex flex-col justify-center">
      <div className="text-13 font-medium text-tertiary">
        {currentStep} of {totalSteps} steps
      </div>
      <div className="mx-1 my-0.5 flex w-40 items-center justify-center lg:w-52">{renderIndicators()}</div>
    </div>
  );
}
