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

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

export default function StepInfoPanel({
  steps,
  stepStatus,
  activeStepIdx,
  isStepValid,
  setActiveStepIdx,
  onClose,
}: StepInfoPanelProps) {
  return (
    <aside className="fixed right-[2.5%] top-[4%] z-40 w-[60%] border-1 border-gray-950/25 bg-gray-100 p-2 pt-5 md:p-8 shadow-lg md:right-[5%] md:w-[30vw]">
      <button
        type="button"
        aria-label="Close steps info"
        onClick={onClose}
        className="absolute flex items-center justify-between align-middle right-1 top-1 rounded p-4 text-gray-700 hover:text-gray-900"
      >
        <i className="icon-[mi--close]" style={{width:16, height:16}} />
      </button>
      <ul className="flex flex-col w-full">
        {steps.map((step, idx) => {
          const status = stepStatus[step.id];
          const isActive = idx === activeStepIdx;

          const stepClass = `cursor-pointer p-2 flex flex-col transition-colors capitalize text-xs/3 font-light underline-offset-4 ${
            isActive
              ? ""
              : !isStepValid && idx > activeStepIdx
              ? "cursor-not-allowed opacity-75"
              : "hover:underline"
          }`;

          return (
            <li key={step.id}>
              <button
                type="button"
                onClick={() => !(!isStepValid && idx > activeStepIdx) && setActiveStepIdx(idx)}
                disabled={!isStepValid && idx > activeStepIdx}
                aria-current={isActive}
                className={stepClass}
              >
                
                <span
                  aria-hidden="true"
                  className={` ${
                    status === "done"
                      ? "text-green-500"
                      : status === "current"
                      ? "text-gray-950 font-normal"
                      : ""
                  }`}
                >{step.title}</span>
              </button>
            </li>
          );
        })}
      </ul>
    </aside>
  );
}