import { FunctionComponent } from 'react';
import Stepper from '@mui/material/Stepper';
import Step from '@mui/material/Step';
import StepLabel from '@mui/material/StepLabel';

export interface StepperHeaderProps {
  /** Ordered step labels — already translated by the caller. */
  steps: string[];
  /** Zero-based index of the active step. */
  activeStep: number;
  /** Optional alternative-label layout (labels under the dots). Defaults to true. */
  alternativeLabel?: boolean;
}

/**
 * Progress header for multi-step flows (onboarding + verification). Wraps MUI Stepper;
 * direction is handled by the RTL-aware theme, so it flips correctly at `/fa`.
 * @component StepperHeader
 */
const StepperHeader: FunctionComponent<StepperHeaderProps> = ({ steps, activeStep, alternativeLabel = true }) => (
  <Stepper activeStep={activeStep} alternativeLabel={alternativeLabel} sx={{ py: 2 }}>
    {steps.map((label) => (
      <Step key={label}>
        <StepLabel>{label}</StepLabel>
      </Step>
    ))}
  </Stepper>
);

export default StepperHeader;
