import { jsx as _jsx } from "react/jsx-runtime";
import { Spinner } from "../../../spinner";
import { cn } from "../../../utils/css";
import { Check } from "lucide-react";
import { useMemo } from "react";
export const StepItem = (props)=>{
    const child = useMemo(()=>{
        if (props.isLoading) {
            return /*#__PURE__*/ _jsx(Spinner, {
                size: "small"
            });
        }
        if (props.isCompleted) {
            // @ts-ignore
            return /*#__PURE__*/ _jsx(Check, {
                size: 20
            });
        }
        return props.children;
    }, [
        props.isLoading,
        props.isCompleted
    ]);
    return /*#__PURE__*/ _jsx("div", {
        className: cn("orderly-flex orderly-items-center orderly-justify-center orderly-w-[32px] orderly-h-[32px] orderly-bg-base-100 orderly-rounded-full", props.active && "orderly-bg-primary", props.isLoading && "orderly-bg-white/10 orderly-border orderly-border-primary", props.isCompleted && "orderly-bg-white/10 orderly-border orderly-border-primary orderly-text-primary"),
        children: child
    });
};

//# sourceMappingURL=step.js.map