import { ListAdminProjectTablePage } from "@/routes/LazyLoad";
import React, { useState } from "react";
import ListAdminDeploymentTablePage from "./ListAdminDeploymentTablePage";

const AdminBaasPage = () => {
  const [activeTab, setActiveTab] = useState("Projects");

  return (
    <div className="rounded-md border">
      <div className="flex items-center border-b border-b-[#E0E0E0] px-8 py-3 text-[#8D8D8D]">
        <div className="flex items-center space-x-6">
          <div
            className={`cursor-pointer rounded-lg px-3 py-1 ${
              activeTab === "Projects" ? "bg-[#f4f4f4] text-[#525252]" : ""
            }`}
            onClick={() => setActiveTab("Projects")}
          >
            Projects
          </div>
          <div
            className={`cursor-pointer rounded-lg px-3 py-1 ${
              activeTab === "Deployments" ? "bg-[#f4f4f4] text-[#525252]" : ""
            }`}
            onClick={() => setActiveTab("Deployments")}
          >
            Deployments
          </div>
        </div>
      </div>
      <div className="mt-5">
        {activeTab == "Projects" && <ListAdminProjectTablePage />}
        {activeTab == "Deployments" && <ListAdminDeploymentTablePage />}
      </div>
    </div>
  );
};

export default AdminBaasPage;
