"use client"

import { Check } from "lucide-react"
import { cn } from "@/lib/utils"
import type { WorkflowDefinition } from "./workflow-config"
import { getCurrentStep, getStepTone } from "./workflow-config"

type Props = {
  definition: WorkflowDefinition
  currentStatus: string
  language: "ar" | "en"
  className?: string
}

export function WorkflowTimeline({ definition, currentStatus, language, className }: Props) {
  const currentIndex = getCurrentStep(definition, currentStatus)

  return (
    <div className={cn("flex flex-wrap items-center gap-1", className)}>
      {definition.steps.map((step, index) => {
        const isDone = index < currentIndex
        const isCurrent = index === currentIndex
        const tone = getStepTone(definition, step.status, currentIndex)

        return (
          <div key={step.status} className="flex items-center gap-1">
            {index > 0 && (
              <div
                className={cn(
                  "h-px w-6",
                  isDone ? "bg-emerald-400" : "bg-border",
                )}
              />
            )}
            <div
              className={cn(
                "flex items-center gap-1.5 rounded-full border px-2.5 py-1 text-[11px] font-medium transition-colors",
                isCurrent && "border-indigo-300 bg-indigo-50 text-indigo-700",
                isDone && "border-emerald-200 bg-emerald-50 text-emerald-700",
                !isCurrent && !isDone && "border-border bg-muted/30 text-muted-foreground",
              )}
            >
              {isDone ? (
                <Check className="h-3 w-3" />
              ) : (
                <span className={cn(
                  "flex h-4 w-4 items-center justify-center rounded-full text-[9px] font-bold",
                  isCurrent ? "bg-indigo-500 text-white" : "bg-muted-foreground/30 text-muted-foreground",
                )}>
                  {index + 1}
                </span>
              )}
              <span>{step.label[language]}</span>
            </div>
          </div>
        )
      })}
    </div>
  )
}