"use client";
import { useTranslations } from "next-intl";
import { Check } from "lucide-react";
import { cn } from "@/lib/utils";

interface InviteStepperProps {
  current: number;
}

export default function InviteStepper({ current }: InviteStepperProps) {
  const t = useTranslations("InvitePage");
  const steps = [t("stepInvitation"), t("stepDetails"), t("stepDone")];

  return (
    <ol className="flex items-center gap-2 sm:gap-3" aria-label={t("progress")}>
      {steps.map((label, index) => {
        const isDone = index < current;
        const isActive = index === current;
        return (
          <li
            key={label}
            className="flex flex-1 items-center gap-2 sm:gap-3"
            aria-current={isActive ? "step" : undefined}
          >
            <span
              className={cn(
                "flex size-7 sm:size-8 shrink-0 items-center justify-center rounded-full text-[13px] sm:text-[14px] font-bold transition-colors duration-300",
                isDone && "bg-secondary-main text-primary-main",
                isActive &&
                  "bg-secondary-main/20 text-secondary-main ring-2 ring-secondary-main",
                !isDone && !isActive && "bg-white/10 text-white/50",
              )}
            >
              {isDone ? <Check className="size-4" strokeWidth={3} /> : index + 1}
            </span>
            <span
              className={cn(
                "hidden sm:block text-[14px] font-medium whitespace-nowrap transition-colors",
                isActive ? "text-white" : "text-white/50",
              )}
            >
              {label}
            </span>
            {index < steps.length - 1 && (
              <span className="relative h-0.5 flex-1 overflow-hidden rounded-full bg-white/10">
                <span
                  className={cn(
                    "absolute inset-y-0 start-0 bg-secondary-main transition-all duration-500",
                    isDone ? "w-full" : "w-0",
                  )}
                />
              </span>
            )}
          </li>
        );
      })}
    </ol>
  );
}