import React from 'react'

export interface StepperStep {
  label: string
}

export interface StepperProps {
  steps: StepperStep[]
  currentStep: number
  compact?: boolean
  className?: string
}

export const Stepper: React.FC<StepperProps> = ({ steps, currentStep, compact = false, className = '' }) => (
  <div className={`flex items-center ${className}`}>
    {steps.map((step, i) => {
      const num = i + 1
      const isDone = num < currentStep
      const isCurrent = num === currentStep
      const lineAfter = i < steps.length - 1
      const active = isDone || isCurrent

      return (
        <React.Fragment key={i}>
          <div className="flex items-center">
            <div className={`
              ${compact ? 'w-6 h-6' : 'w-8 h-8'} rounded-full flex items-center justify-center flex-shrink-0
              ${active ? 'bg-teal-500' : 'border-2 border-slate-200'}
            `}>
              {isDone ? (
                <span className={`material-symbols-outlined text-white ${compact ? 'text-caption' : 'text-body-lg'}`}>check</span>
              ) : (
                <span className={`font-bold ${compact ? 'text-caption' : 'text-body-sm'} ${isCurrent ? 'text-white' : 'text-slate-400'}`}>
                  {num}
                </span>
              )}
            </div>
            {!compact && (
              <span className={`ml-2 text-body-sm whitespace-nowrap ${active ? 'font-bold text-teal-600' : 'font-semibold text-slate-400'}`}>
                {step.label}
              </span>
            )}
          </div>

          {lineAfter && (
            <div className={`
              ${compact ? 'w-8 mx-2' : 'flex-1 mx-4'} h-0.5
              ${isDone ? 'bg-teal-500' : 'bg-slate-200'}
            `} />
          )}
        </React.Fragment>
      )
    })}
  </div>
)