'use client';

import React from 'react';
import { Check, Circle } from 'lucide-react';

const STEPS = [
  { id: 1, label: 'Registration', statusKey: 'PENDING_VERIFICATION' },
  { id: 2, label: 'Docs Upload', statusKey: 'DOCUMENTS_SUBMITTED' },
  { id: 3, label: 'Institute Verify', statusKey: 'INSTITUTE_VERIFIED' },
  { id: 4, label: 'Sector Approve', statusKey: 'SECTOR_APPROVED' },
  { id: 5, label: 'Orientation', statusKey: 'ORIENTATION_COMPLETED' },
  { id: 6, label: 'Training', statusKey: 'TRAINING_COMPLETED' },
  { id: 7, label: 'Assessment', statusKey: 'CERTIFIED' },
  { id: 8, label: 'Agreement', statusKey: 'AGREEMENT_ACCEPTED' },
  { id: 9, label: 'Active', statusKey: 'ACTIVE' },
];

export function OnboardingStepper({ currentStatus }: { currentStatus: string }) {
  const currentStepIndex = STEPS.findIndex((s) => s.statusKey === currentStatus);

  return (
    <div className="w-full py-4 overflow-x-auto">
      <div className="flex items-center min-w-[700px] justify-between">
        {STEPS.map((step, idx) => {
          const isCompleted = idx < currentStepIndex;
          const isCurrent = idx === currentStepIndex;

          return (
            <React.Fragment key={step.id}>
              <div className="flex flex-col items-center gap-1.5">
                <div
                  className={`h-7 w-7 rounded-full flex items-center justify-center text-xs font-bold transition-colors ${
                    isCompleted
                      ? 'bg-emerald-500 text-white'
                      : isCurrent
                      ? 'bg-primary text-white ring-4 ring-primary/20'
                      : 'bg-muted text-muted-foreground'
                  }`}
                >
                  {isCompleted ? <Check className="h-3.5 w-3.5" /> : step.id}
                </div>
                <span
                  className={`text-[10px] font-semibold whitespace-nowrap ${
                    isCurrent ? 'text-primary font-bold' : 'text-muted-foreground'
                  }`}
                >
                  {step.label}
                </span>
              </div>
              {idx < STEPS.length - 1 && (
                <div
                  className={`h-[2px] flex-1 mx-1 ${
                    idx < currentStepIndex ? 'bg-emerald-500' : 'bg-border/60'
                  }`}
                />
              )}
            </React.Fragment>
          );
        })}
      </div>
    </div>
  );
}