admin/components/events/create/consumer/ConsumerWizardStepper.tsx

import Link from 'next/link'

import CalendarFillIcon from '@/components/icons/CalendarFillIcon'
import HomeFillIcon from '@/components/icons/HomeFillIcon'
import { CONSUMER_ROUTES } from '@/constants/routes'
import { cn } from '@/lib/cn'
import { texts } from '@/texts'

interface ConsumerWizardStepperProps {
  currentStep: number
  className?: string
}

const STEPS = [
  texts.events.wizardProgressStep1,
  texts.events.wizardProgressStep2,
  texts.events.wizardProgressStep3,
  texts.events.wizardProgressStep4,
] as const

const ConsumerWizardStepper = ({ currentStep, className }: ConsumerWizardStepperProps) => {
  const progress = ((currentStep - 1) / (STEPS.length - 1)) * 75

  return (
    <nav
      aria-label={texts.events.wizardStepsAria}
      className={cn('mx-auto w-full rounded-consumer-modal bg-white p-4', className)}
    >
      <div className="grid grid-cols-[40px_1fr_40px] items-center">
        <CalendarFillIcon className="size-10" />
        <h2 className="text-center text-base font-medium text-black">{texts.events.wizardProgressTitle}</h2>
        <Link
          aria-label={texts.identity.backToMyEvents}
          className="consumer-focus-ring flex size-10 items-center justify-center rounded-full text-tertiary-900"
          href={CONSUMER_ROUTES.MY_EVENTS}
        >
          <HomeFillIcon />
        </Link>
      </div>

      <div className="relative mt-[18px]">
        <span
          aria-hidden
          className="absolute inset-x-[12.5%] top-2 h-0.5 bg-secondary-40"
        />
        <span
          aria-hidden
          className="absolute top-2 h-0.5 bg-primary transition-[width] duration-300"
          style={{ insetInlineStart: '12.5%', width: `${progress}%` }}
        />

        <ol className="grid grid-cols-4">
          {STEPS.map((label, index) => {
            const step = index + 1
            const isReached = step <= currentStep

            return (
              <li
                key={label}
                aria-current={step === currentStep ? 'step' : undefined}
                className="relative z-10 flex min-w-0 flex-col items-center"
              >
                <span className={cn('size-4 rounded-full', isReached ? 'bg-primary' : 'bg-secondary-40')} />
                <span
                  className={cn(
                    'mt-1 w-full truncate px-0.5 text-center text-2xs leading-4',
                    isReached ? 'text-primary' : 'text-secondary-30'
                  )}
                >
                  {label}
                </span>
              </li>
            )
          })}
        </ol>
      </div>
    </nav>
  )
}

export default ConsumerWizardStepper