import React from 'react';
import { Box, ThemeColorType } from '@nova-hf/ui';

import { ProgressBarItem } from './ProgressbarItem';

export type ProgressBarProps = {
  stepCount: number;
  currentStep: number;
  isSolid?: boolean;
  color?: ThemeColorType;
};

export const ProgressBar = ({
  stepCount,
  currentStep,
  isSolid = false,
  color = 'pink',
}: ProgressBarProps) => {
  const steps = Array.from(Array(stepCount).keys());

  return (
    <Box {...(!isSolid && { gap: { sm: 2, lg: 4 } })} display="flex" width="100%">
      {steps.map((i) => {
        const isActive = isSolid ? i + 1 <= currentStep : i + 1 === currentStep;
        return (
          <ProgressBarItem
            key={i}
            isActive={isActive}
            isCurrentStep={currentStep === i + 1}
            color={color}
            isSolid={isSolid}
          />
        );
      })}
    </Box>
  );
};