import { clsx } from "clsx";
import { STEPS } from "./types.js";

export function StepBar({ current }: { current: number }) {
  return (
    <div className="flex items-center gap-0 mb-6">
      {STEPS.map((label, idx) => (
        <div key={idx} className="flex items-center flex-1 min-w-0">
          <div className="flex flex-col items-center flex-shrink-0">
            <div
              className={clsx(
                "w-7 h-7 rounded-full flex items-center justify-center text-xs font-semibold transition-colors",
                idx < current
                  ? "bg-brand-600 text-white"
                  : idx === current
                    ? "bg-brand-600 text-white ring-4 ring-brand-100"
                    : "bg-gray-100 text-gray-400",
              )}
            >
              {idx < current ? "✓" : idx + 1}
            </div>
            <span
              className={clsx(
                "mt-1 text-[10px] text-center whitespace-nowrap leading-tight max-w-[72px]",
                idx === current ? "text-brand-600 font-medium" : "text-gray-400",
              )}
            >
              {label}
            </span>
          </div>
          {idx < STEPS.length - 1 && (
            <div
              className={clsx(
                "h-0.5 flex-1 mx-1 mt-[-14px]",
                idx < current ? "bg-brand-400" : "bg-gray-200",
              )}
            />
          )}
        </div>
      ))}
    </div>
  );
}
