src/components/ApprovalFlow.tsx

import { cn } from "@/lib/utils";

const PIPELINE = [
  { id: "cc_review", label: "CC Review" },
  { id: "cc_recommended", label: "CC Recommended" },
  { id: "jd_approval", label: "JD Approval" },
  { id: "jd_recommended", label: "JD Recommended" },
  { id: "director_approval", label: "Director Approval" },
  { id: "certification", label: "Certified" },
];

interface ApprovalFlowProps {
  currentStage: string;
}

export function ApprovalFlow({ currentStage }: ApprovalFlowProps) {
  const currentIndex = PIPELINE.findIndex((step) => step.id === currentStage);

  return (
    <div className="flex flex-wrap items-center gap-1 text-[10px] sm:text-xs text-muted-foreground">
      {PIPELINE.map((step, index) => {
        const isDone = currentIndex !== -1 && index < currentIndex;
        const isCurrent = currentIndex === index;

        return (
          <div key={step.id} className="flex items-center gap-1">
            <div
              className={cn(
                "h-1.5 w-1.5 rounded-full",
                isDone
                  ? "bg-emerald-500"
                  : isCurrent
                  ? "bg-primary"
                  : "bg-muted-foreground/40",
              )}
            />
            <span
              className={cn(
                "uppercase tracking-wide",
                isCurrent
                  ? "font-semibold text-primary"
                  : isDone
                  ? "text-emerald-600"
                  : undefined,
              )}
            >
              {step.label}
            </span>
            {index < PIPELINE.length - 1 && (
              <span className="mx-0.5 text-muted-foreground">›</span>
            )}
          </div>
        );
      })}
    </div>
  );
}