import { cn } from '@/lib/utils'
import type { InterviewPhase } from '@/types'

const PHASES: { key: InterviewPhase; label: string }[] = [
  { key: 'scoping', label: 'Scoping' },
  { key: 'discovery', label: 'Discovery' },
  { key: 'enrichment', label: 'Enrichment' },
  { key: 'review', label: 'Review' },
  { key: 'generation', label: 'Generate' },
]

interface PhaseIndicatorProps {
  currentPhase: InterviewPhase
}

export function PhaseIndicator({ currentPhase }: PhaseIndicatorProps) {
  const currentIndex = PHASES.findIndex((p) => p.key === currentPhase)

  return (
    <div className="flex items-center gap-1">
      {PHASES.map((phase, i) => {
        const isActive = phase.key === currentPhase
        const isCompleted = i < currentIndex

        return (
          <div key={phase.key} className="flex items-center">
            {i > 0 && (
              <div
                className={cn(
                  'mx-1 h-px w-4',
                  isCompleted ? 'bg-primary' : 'bg-border'
                )}
              />
            )}
            <span
              className={cn(
                'font-label text-[0.6875rem] uppercase tracking-wide px-2 py-0.5 rounded',
                isActive && 'text-primary bg-primary/10 font-medium',
                isCompleted && 'text-primary',
                !isActive && !isCompleted && 'text-muted-foreground'
              )}
            >
              {phase.label}
            </span>
          </div>
        )
      })}
    </div>
  )
}
