import { Check } from 'lucide-react';
import { UPLOAD_VIEW_STEPS } from './types';
import type { UploadViewStep } from './types';

interface UploadViewStepperProps {
  step: UploadViewStep;
}

export function UploadViewStepper({ step }: UploadViewStepperProps) {
  return (
    <div className="flex items-center justify-between mb-8 px-4">
      {UPLOAD_VIEW_STEPS.map((s, i) => (
        <div key={s.num} className="flex items-center gap-4">
          <div
            className={`w-8 h-8 rounded-full flex items-center justify-center font-bold text-sm transition-all duration-[var(--duration-normal)] ${step >= s.num ? 'bg-primary text-primary-foreground' : 'bg-muted text-muted-foreground'}`}
          >
            {step > s.num ? <Check className="w-5 h-5" /> : s.num}
          </div>
          <span
            className={`${step >= s.num ? 'text-white' : 'text-kodo-content-dim'} font-medium hidden md:block`}
          >
            {s.label}
          </span>
          {i < UPLOAD_VIEW_STEPS.length - 1 && (
            <div className="w-12 h-px bg-border mx-4 hidden md:block opacity-50" />
          )}
        </div>
      ))}
    </div>
  );
}