'use client';
import { getTranslation } from '@payloadcms/translations';
import React, { Fragment, createContext, useContext, useState } from 'react';
import IconGraphic from '../../graphics/Icon/index.js';
import { useConfig } from '../../providers/Config/index.js';
import { useTranslation } from '../../providers/Translation/index.js';
const baseClass = 'step-nav';
const Context = /*#__PURE__*/ createContext({});
const StepNavProvider = ({ children })=>{
    const [stepNav, setStepNav] = useState([]);
    return /*#__PURE__*/ React.createElement(Context.Provider, {
        value: {
            setStepNav,
            stepNav
        }
    }, children);
};
const useStepNav = ()=>useContext(Context);
const StepNav = ({ Link, className })=>{
    const { i18n } = useTranslation();
    const { stepNav } = useStepNav();
    const config = useConfig();
    const { routes: { admin } } = config;
    const LinkElement = Link || 'a';
    return /*#__PURE__*/ React.createElement(Fragment, null, stepNav.length > 0 ? /*#__PURE__*/ React.createElement("nav", {
        className: [
            baseClass,
            className
        ].filter(Boolean).join(' ')
    }, /*#__PURE__*/ React.createElement(LinkElement, {
        className: `${baseClass}__home`,
        href: admin,
        tabIndex: 0
    }, /*#__PURE__*/ React.createElement(IconGraphic, null)), /*#__PURE__*/ React.createElement("span", null, "/"), stepNav.map((item, i)=>{
        const StepLabel = getTranslation(item.label, i18n);
        const isLast = stepNav.length === i + 1;
        const Step = isLast ? /*#__PURE__*/ React.createElement("span", {
            className: `${baseClass}__last`,
            key: i
        }, StepLabel) : /*#__PURE__*/ React.createElement(Fragment, {
            key: i
        }, item.url ? /*#__PURE__*/ React.createElement(LinkElement, {
            href: item.url
        }, /*#__PURE__*/ React.createElement("span", {
            key: i
        }, StepLabel)) : /*#__PURE__*/ React.createElement("span", {
            key: i
        }, StepLabel), /*#__PURE__*/ React.createElement("span", null, "/"));
        return Step;
    })) : /*#__PURE__*/ React.createElement("div", {
        className: [
            baseClass,
            className
        ].filter(Boolean).join(' ')
    }, /*#__PURE__*/ React.createElement(IconGraphic, null)));
};
export { StepNavProvider, useStepNav };
export default StepNav;

//# sourceMappingURL=index.js.map