import { jsx as _jsx } from "react/jsx-runtime";
import { useMemo } from 'react';
import DynamicComponent from '../shared/dynamic-component/dynamic-component';
import { useVariable } from '../shared/interactivity';
/**
 * The Match component allows the children to be rendered based on a value, at runtime in the JS code.
 */
function Match(props) {
    const [value] = useVariable(props.value, { suspend: false });
    const component = useMemo(() => {
        if (value in props.when) {
            return props.when[value];
        }
        return props.default;
    }, [value, props.when, props.default]);
    if (!component) {
        return null;
    }
    return _jsx(DynamicComponent, { component: component });
}
export default Match;
//# sourceMappingURL=match.js.map