"use client";

import { CheckCircleIcon } from "@heroicons/react/24/outline";
import type { StepIndicatorProps, StepStatus } from "./types";

function getStepIndicatorClasses(status: StepStatus): string {
  switch (status) {
    case "completed":
      return "bg-green-500 border-green-500 text-white";
    case "active":
      return "border-blue-500 text-blue-500 bg-blue-50";
    case "disabled":
      return "border-gray-300 text-gray-400 bg-gray-50";
    default:
      return "border-gray-300 text-gray-500 bg-white";
  }
}

export function StepIndicator({ stepNumber, status }: StepIndicatorProps) {
  return (
    <div
      className={`flex-shrink-0 w-10 h-10 rounded-full border-2 flex items-center justify-center font-bold transition-all duration-300 ${getStepIndicatorClasses(status)}`}
    >
      {status === "completed" ? <CheckCircleIcon className="w-6 h-6" /> : <span>{stepNumber}</span>}
    </div>
  );
}
