import { Fragment } from "react";
import { Check } from "lucide-react";
import { STEPS } from "./schema";

export function StepIndicator({ step }: { step: number }) {
  return (
    <div className="flex items-center">
      {STEPS.map((item, index) => (
        <Fragment key={item.id}>
          <div className="flex shrink-0 flex-col items-center gap-1">
            <div
              className={`flex h-7 w-7 items-center justify-center rounded-full text-xs font-semibold transition-colors ${
                step > item.id
                  ? "bg-primary text-primary-foreground"
                  : step === item.id
                    ? "border-2 border-primary text-primary"
                    : "bg-muted text-muted-foreground"
              }`}
            >
              {step > item.id ? <Check className="h-3.5 w-3.5" /> : item.id}
            </div>
            <span
              className={`hidden text-[10px] font-medium lg:block ${
                step >= item.id ? "text-foreground" : "text-muted-foreground"
              }`}
            >
              {item.short}
            </span>
          </div>
          {index < STEPS.length - 1 && (
            <div
              className={`mx-1 h-0.5 flex-1 rounded-full transition-colors ${
                step > item.id ? "bg-primary" : "bg-border"
              }`}
            />
          )}
        </Fragment>
      ))}
    </div>
  );
}
