import React from "react";
import { Spin } from "antd";
import { useButtonState } from "../../../zustand/ButtonState";
import PaperTable from "./Tables/Paper/TablePage";
import ContentsPage from "./Tables/Contents/Page";

const components = [
  { component: <ContentsPage /> },
  { component: <PaperTable /> },
];

const ActiveTabs = () => {
  const { ActiveTab } = useButtonState((state) => state);

  const renderComponent = () => {
    const selectedComponent = components[Number(ActiveTab)]; // Adjust index to start from 0
    return selectedComponent ? selectedComponent.component : <Spin />;
  };

  return <div>{renderComponent()}</div>;
};

export default ActiveTabs;
