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>
  );
}