"use client";

import { CheckCircleIcon } from "lucide-react";
import { useLocaleFunction } from "@/hooks/use-localed";

interface ExamStepIndicatorProps {
  currentStep: 1 | 2 | 3;
}

export function ExamStepIndicator({ currentStep }: ExamStepIndicatorProps) {
  const t = useLocaleFunction();

  const steps = [
    { id: 1, label: t("exam.confirm_information") },
    { id: 2, label: t("exam.exam_rules") },
    { id: 3, label: t("exam.start_exam") },
  ];

  return (
    <div className="flex items-center justify-center gap-2 text-muted-foreground mb-8">
      {steps.map((step, index) => {
        const isActive = step.id === currentStep;
        const isPast = step.id < currentStep;

        return (
          <div className="flex items-center gap-2" key={step.id}>
            <span
              className={`w-6 h-6 rounded-full flex items-center justify-center text-xs font-medium ${
                isActive
                  ? "bg-primary text-primary-foreground"
                  : isPast
                    ? "bg-success text-success-foreground"
                    : "bg-muted text-muted-foreground"
              }`}
            >
              {isPast ? <CheckCircleIcon className="w-4 h-4" /> : step.id}
            </span>
            <span className={isActive ? "font-medium text-foreground" : ""}>
              {step.label}
            </span>
            {index < steps.length - 1 && (
              <span className="text-muted-foreground mx-2">→</span>
            )}
          </div>
        );
      })}
    </div>
  );
}

export default ExamStepIndicator;