import { useI18n } from "../../i18n/I18nContext";
import { WIZARD_STEPS } from "../../pages/studio/wizardState";

type Props = {
  activeIndex: number;
  onSelect?: (index: number) => void;
};

export function Stepper({ activeIndex, onSelect }: Props) {
  const { t } = useI18n();
  return (
    <ol className="hb-stepper" aria-label={t("wizard.stepperAria")}>
      {WIZARD_STEPS.map((labelKey, index) => {
        const active = index === activeIndex;
        const done = index < activeIndex;
        return (
          <li key={labelKey}>
            <button
              type="button"
              className={`hb-stepper__item${active ? " is-active" : ""}${done ? " is-done" : ""}`}
              onClick={() => onSelect?.(index)}
            >
              <span className="hb-stepper__num">{index + 1}</span>
              <span>{t(labelKey)}</span>
            </button>
          </li>
        );
      })}
    </ol>
  );
}
