'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React from 'react';
import { cn } from '@/lib/utils';
import * as PhosphorIcons from '@phosphor-icons/react';
/**
 * Steps Components for MDX Documentation
 * 
 * Mintlify-compatible step-by-step guide components.
 */ // Dynamic icon resolver
function getIcon(iconName) {
    if (!iconName) return null;
    const pascalCase = iconName.split(/[-_]/).map((word)=>word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()).join('');
    const Icon = PhosphorIcons[pascalCase];
    return Icon || null;
}
const StepsContext = /*#__PURE__*/ React.createContext({
    titleSize: 'p'
});
export function Step({ title, children, icon, stepNumber, titleSize: localTitleSize, className }) {
    const { titleSize: contextTitleSize } = React.useContext(StepsContext);
    const titleSize = localTitleSize ?? contextTitleSize;
    const Icon = icon ? getIcon(icon) : null;
    const TitleTag = titleSize === 'p' ? 'div' : titleSize;
    const titleClass = cn('font-semibold text-foreground', titleSize === 'h2' && 'text-xl', titleSize === 'h3' && 'text-lg', titleSize === 'h4' && 'text-base', titleSize === 'p' && 'text-base');
    return /*#__PURE__*/ _jsxs("div", {
        className: cn('relative pl-8 pb-8 last:pb-0', className),
        children: [
            /*#__PURE__*/ _jsx("div", {
                className: "absolute left-[11px] top-8 bottom-0 w-px bg-border last:hidden"
            }),
            /*#__PURE__*/ _jsx("div", {
                className: "absolute left-0 top-0 flex h-6 w-6 items-center justify-center rounded-full bg-primary text-primary-foreground text-xs font-semibold",
                children: Icon ? /*#__PURE__*/ _jsx(Icon, {
                    className: "h-3.5 w-3.5",
                    weight: "bold"
                }) : stepNumber
            }),
            /*#__PURE__*/ _jsxs("div", {
                className: "pt-0.5",
                children: [
                    /*#__PURE__*/ _jsx(TitleTag, {
                        className: titleClass,
                        children: title
                    }),
                    /*#__PURE__*/ _jsx("div", {
                        className: "mt-2 text-sm text-foreground/90 [&>p]:mb-2 [&>p:last-child]:mb-0 [&>pre]:my-3 [&>ul]:mt-2 [&>ol]:mt-2",
                        children: children
                    })
                ]
            })
        ]
    });
}
export function Steps({ children, titleSize = 'p', className }) {
    // Auto-number steps
    const numberedChildren = React.Children.map(children, (child, index)=>{
        if (/*#__PURE__*/ React.isValidElement(child) && child.type === Step) {
            return /*#__PURE__*/ React.cloneElement(child, {
                stepNumber: child.props.stepNumber ?? index + 1
            });
        }
        return child;
    });
    return /*#__PURE__*/ _jsx(StepsContext.Provider, {
        value: {
            titleSize
        },
        children: /*#__PURE__*/ _jsx("div", {
            className: cn('my-6', className),
            children: numberedChildren
        })
    });
}
