import { Check } from 'lucide-react'
import styles from './CheckoutStepper.module.css'

export type CheckoutStepId = 'cart' | 'login' | 'delivery' | 'payment'

const STEPS: { id: CheckoutStepId; label: string }[] = [
  { id: 'cart', label: 'سبد خرید' },
  { id: 'login', label: 'ورود' },
  { id: 'delivery', label: 'ارسال' },
  { id: 'payment', label: 'پرداخت' },
]

interface CheckoutStepperProps {
  current: CheckoutStepId
  isAuthenticated: boolean
}

export function CheckoutStepper({ current, isAuthenticated }: CheckoutStepperProps) {
  const visibleSteps = isAuthenticated
    ? STEPS.filter((step) => step.id !== 'login')
    : STEPS

  const currentVisibleIdx = visibleSteps.findIndex((step) => step.id === current)

  return (
    <nav className={styles.stepper} aria-label="مراحل تکمیل خرید">
      {visibleSteps.map((step, index) => {
        const isDone = currentVisibleIdx >= 0 && index < currentVisibleIdx
        const isActive = step.id === current
        const connectorDone = currentVisibleIdx >= 0 && index < currentVisibleIdx

        return (
          <div key={step.id} className={styles.stepGroup}>
            <div
              className={[
                styles.stepUnit,
                isActive ? styles.stepActive : '',
                isDone ? styles.stepDone : '',
              ]
                .filter(Boolean)
                .join(' ')}
            >
              <span className={styles.stepLabel}>{step.label}</span>
              <span className={styles.stepDot} aria-hidden>
                {isDone ? <Check size={14} /> : index + 1}
              </span>
            </div>

            {index < visibleSteps.length - 1 && (
              <div
                className={[styles.connector, connectorDone ? styles.connectorDone : '']
                  .filter(Boolean)
                  .join(' ')}
                aria-hidden
              />
            )}
          </div>
        )
      })}
    </nav>
  )
}
