import React, { FC } from "react";
export const buildProvidersTree:FC<any> = (providers) => {
  // 基本ケース：ContextProviderが1つしか残っていない場合、それを返して終了する
  if (providers.length === 1) {
    return providers[0];
  }

  // 配列から最初の2つのContextProviderを取り出す
  const FirstProvider = providers.shift();
  const SecondProvider = providers.shift();

  // 十分な数のContextProviderがあるかどうかを確認
  if (FirstProvider === undefined || SecondProvider === undefined) {
    throw new Error("ContextProviderが不足しています");
  }

  // 最初の2つのContextProviderをネストした新しいContextProviderを作成し、再帰する
  return buildProvidersTree([
    ({ children }) => (
      <FirstProvider>
        <SecondProvider {...{ children }} />
      </FirstProvider>
    ),
    ...providers,
  ]);
};