import React from "react";
import type { StepStatus } from "./wizardTypes";

interface StepNavigationProps {
  steps: { id: string; title: string }[];
  stepStatus: Record<string, StepStatus>;
  activeStepIdx: number;
  setActiveStepIdx: (idx: number) => void;
  isStepValid: boolean;
}

export default function StepNavigation({
  steps,
  stepStatus,
  activeStepIdx,
  setActiveStepIdx,
  isStepValid,
}: StepNavigationProps) {
  return (
    <nav
      aria-label="Step navigation"
      className="flex h-10 w-full items-start justify-start align-top gap-0.5 mt-1"
    >
      {steps.map((step, idx) => {
        const status = stepStatus[step.id];
        const isActive = idx === activeStepIdx;

        const baseClass = "relative border border-gray-300 bg-gray-100/50 text-xs/4 px-2 py-1 h-6 transition-all duration-300";
        const statusClass =
          status === "done"
            ? "border-transparent bg-green-500/50"
            : status === "current"
            ? "border-gray-950 bg-gray-100 h-8"
            : "border-gray-950/50";

        const cursorClass = isActive
          ? "cursor-default"
          : !isStepValid && idx > activeStepIdx
          ? "cursor-not-allowed opacity-50"
          : "cursor-pointer";

        return (
          <button
            key={step.id}
            type="button"
            onClick={() => !(!isStepValid && idx > activeStepIdx) && setActiveStepIdx(idx)}
            disabled={!isStepValid && idx > activeStepIdx}
            aria-current={isActive}
            aria-label={`Step ${idx + 1}: ${step.title}`}
            className={`${baseClass} ${statusClass} ${cursorClass}`}
            tabIndex={isActive ? 0 : -1}
          >
            <span>{idx + 1}</span>
          </button>
        );
      })}
    </nav>
  );
}