import { wizardSteps, type ReservationWizardCopy } from './reservationWizard.copy'
import type { WizardStepId } from './reservationWizard.types'

export function ReservationStepper({
  copy,
  currentStep,
  completedSteps,
  highestReachableIndex,
  onStepClick,
}: {
  copy: ReservationWizardCopy
  currentStep: WizardStepId
  completedSteps: Set<WizardStepId>
  highestReachableIndex: number
  onStepClick: (step: WizardStepId) => void
}) {
  const currentIndex = wizardSteps.findIndex((step) => step.id === currentStep)
  const currentLabel = copy[wizardSteps[currentIndex].labelKey] as string

  return (
    <div className="space-y-3">
      <div className="md:hidden">
        <p className="text-sm font-semibold text-slate-900">{copy.stepOf(currentIndex + 1, wizardSteps.length, currentLabel)}</p>
        <div className="mt-2 h-2 rounded-full bg-slate-200">
          <div
            className="h-2 rounded-full bg-blue-700 transition-all"
            style={{ width: `${((currentIndex + 1) / wizardSteps.length) * 100}%` }}
          />
        </div>
      </div>
      <ol className="hidden grid-cols-6 gap-2 md:grid">
        {wizardSteps.map((step, index) => {
          const active = step.id === currentStep
          const complete = completedSteps.has(step.id)
          const disabled = index > highestReachableIndex
          return (
            <li key={step.id}>
              <button
                type="button"
                aria-current={active ? 'step' : undefined}
                disabled={disabled}
                onClick={() => onStepClick(step.id)}
                className={[
                  'h-full w-full rounded-lg border px-3 py-3 text-left text-sm transition',
                  active ? 'border-blue-700 bg-blue-50 text-blue-900' : complete ? 'border-emerald-200 bg-emerald-50 text-emerald-900' : 'border-slate-200 bg-white text-slate-500',
                  disabled ? 'cursor-not-allowed opacity-50' : 'hover:border-blue-300',
                ].join(' ')}
              >
                <span className="block text-xs font-semibold">{index + 1}</span>
                <span className="mt-1 block font-medium">{copy[step.labelKey] as string}</span>
              </button>
            </li>
          )
        })}
      </ol>
    </div>
  )
}

