import { useLocalizations } from "../../localization/makeLocalizable.js";
import { ProfileCardHeader } from "./elements/ProfileCard.js";
import { Stepper } from "./elements/Stepper/Stepper.js";
import { useWizard } from "./elements/Wizard/WizardContext.js";
import { jsx } from "@emotion/react/jsx-runtime";

//#region src/components/ConfigureSSO/ConfigureSSOHeader.tsx
const ConfigureSSOHeader = () => {
	const { activeSteps, currentStep, goToStep } = useWizard();
	const { t } = useLocalizations();
	const visibleSteps = activeSteps.filter((step) => step.id !== "select-provider");
	const currentIndex = visibleSteps.findIndex((step) => step.id === currentStep?.id);
	return /* @__PURE__ */ jsx(ProfileCardHeader, { children: /* @__PURE__ */ jsx(Stepper, { children: visibleSteps.map((step, index) => {
		const isCurrent = index === currentIndex;
		const isCompleted = step.isCompleted ?? index < currentIndex;
		const isReachable = isCompleted || index <= currentIndex;
		const labelText = step.label ? typeof step.label === "string" ? step.label : t(step.label) : "";
		return /* @__PURE__ */ jsx(Stepper.Item, {
			bullet: index + 1,
			isCurrent,
			isCompleted,
			isReachable,
			onClick: () => void goToStep(step.id),
			children: labelText
		}, step.id);
	}) }) });
};

//#endregion
export { ConfigureSSOHeader };
//# sourceMappingURL=ConfigureSSOHeader.js.map