import React from "react";
import { ReactNode } from "react";
import { useLocation, useSearchParams } from "react-router-dom";

export interface IQueryRouterProps {
  mapping: Record<string, ReactNode>;
};

export const QueryRouter = ({ mapping }: IQueryRouterProps) => {
  const [params] = useSearchParams();
  let element = null;

  for (const key of params.keys()) {
    if (mapping[key]) {
      element = mapping[key];
      break;
    }
  }
  if (element === null) {
    throw new Error("missing mapping");
  }

  return element;
};