"use client";

import { motion } from "framer-motion";
import { IconCheck } from "@tabler/icons-react";
import { cn } from "../lib/utils";
import { transitions } from "../lib/motion";

/** Progress through a multi-step flow. */
export function Steps({
  steps,
  current,
  className,
}: {
  steps: Array<{ label: string; description?: string }>;
  /** Index of the active step. Earlier steps show as done. */
  current: number;
  className?: string;
}) {
  return (
    <ol className={cn("flex w-full items-start", className)}>
      {steps.map((step, index) => {
        const done = index < current;
        const active = index === current;
        return (
          <li key={step.label} className="relative flex min-w-0 flex-1 flex-col items-center gap-1.5 text-center" aria-current={active ? "step" : undefined}>
            {index > 0 ? (
              <span aria-hidden="true" className="absolute top-3 right-1/2 left-[-50%] h-px bg-border">
                <motion.span
                  className="absolute inset-y-0 left-0 bg-action"
                  initial={false}
                  animate={{ width: index <= current ? "100%" : "0%" }}
                  transition={transitions.enter}
                />
              </span>
            ) : null}
            <motion.span
              initial={false}
              animate={{ scale: active ? 1.08 : 1 }}
              transition={transitions.spring}
              className={cn(
                "relative z-10 flex size-6 items-center justify-center rounded-full border text-xs font-semibold transition-colors duration-200",
                done && "border-action bg-action text-background",
                active && "border-action bg-background text-action ring-4 ring-action/15",
                !done && !active && "border-border bg-background text-muted-foreground",
              )}
            >
              {done ? <IconCheck className="size-3.5" /> : index + 1}
            </motion.span>
            <span className={cn("max-w-full truncate px-1 text-xs font-medium", active || done ? "text-foreground" : "text-muted-foreground")}>
              {step.label}
            </span>
            {step.description ? (
              <span className="hidden max-w-full truncate px-1 text-xs text-muted-foreground sm:block">{step.description}</span>
            ) : null}
          </li>
        );
      })}
    </ol>
  );
}