import HuStepper from '@material-hu/components/design-system/Stepper';
import HuTabs from '@material-hu/components/design-system/Tabs';

import { type ReviewInputSectionType } from '../../../../components/ReviewInputSection';

type SectionTab = { value: ReviewInputSectionType; label: string };
type StepperStep = {
  id: ReviewInputSectionType;
  title: string;
  number: number;
};

type ReviewSectionsNavProps = {
  isReadOnly: boolean;
  activeSectionType: ReviewInputSectionType;
  sectionTabs: SectionTab[];
  stepperSteps: StepperStep[];
  currentStepIndex: number;
  onTabChange: (section: ReviewInputSectionType) => void;
};

const ReviewSectionsNav = ({
  isReadOnly,
  activeSectionType,
  sectionTabs,
  stepperSteps,
  currentStepIndex,
  onTabChange,
}: ReviewSectionsNavProps) => {
  if (isReadOnly) {
    return (
      <HuTabs
        value={activeSectionType}
        tabs={sectionTabs}
        onTabChange={v => onTabChange(v as ReviewInputSectionType)}
      />
    );
  }

  return (
    <HuStepper
      steps={stepperSteps}
      currentStep={currentStepIndex}
    />
  );
};

export default ReviewSectionsNav;
