import { jsx as _jsx } from "react/jsx-runtime";
import { useEffect, useState } from "react";
import { useRouterContext } from "./Router";
export function RouteComponent({ spinner }) {
    const ctx = useRouterContext();
    const route = ctx.route;
    if (route.Component) {
        const Component = route.Component;
        return _jsx(Component, { ...ctx.params });
    }
    else if (route.LazyComponent) {
        return _jsx(LazyRouteComponent, { route: route, spinner: spinner });
    }
    else {
        throw new Error(`Invalid route for ${route.path}. Either Component or LazyCOmponent must be specified.`);
    }
}
function LazyRouteComponent({ route, spinner }) {
    const [Component, setComponent] = useState(null);
    useEffect(() => {
        route.LazyComponent().then(module => {
            if (!module.default) {
                throw new Error(`Lazy module for ${route.path} does not have a default export`);
            }
            // we need to wrap the component type in an arrow function
            // otherwise the setState function will execute the function as a state update function
            setComponent(() => module.default);
        });
    }, [route]);
    return Component ? (_jsx(Component, {})) : spinner || null;
}
//# sourceMappingURL=RouteComponent.js.map