'use client';
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import PageUsersCompanyTableSection from "./companies/page";
import PageUsersBuildingTableSection from "./builds/page";
import PageUsersPersonTableSection from "./people/page";

const PageAddUserSelections = ({
    selectedCompanyIDS,
    selectedBuildingIDS,
    defaultSelection,
    appendCompanyID,
    appendBuildingID,
    removeCompanyID,
    removeBuildingID,
    setDefaultSelection,
    personID,
    setPersonID,
}: {
    selectedCompanyIDS: string[];
    selectedBuildingIDS: string[];
    defaultSelection: string;
    appendCompanyID: (id: string) => void;
    appendBuildingID: (id: string) => void;
    removeCompanyID: (id: string) => void;
    removeBuildingID: (id: string) => void;
    setDefaultSelection: (id: string) => void;
    personID: string;
    setPersonID: (id: string) => void;
}) => {
    const tabsClassName = "border border-gray-300 rounded-sm h-10"
    return (
        <div className="flex flex-col gap-4">
            <Tabs defaultValue="builds" className="w-full">
                <TabsList className="grid w-full grid-flow-col auto-cols-fr gap-1.5 mx-5">
                    <TabsTrigger className={tabsClassName} value="builds">Append Builds</TabsTrigger>
                    <TabsTrigger className={tabsClassName} value="company">Append Company</TabsTrigger>
                    <TabsTrigger className={tabsClassName} value="person">Append Person</TabsTrigger>
                </TabsList>
                <div className="mt-6">
                    <TabsContent value="builds"><PageUsersBuildingTableSection selectedBuildIDS={selectedBuildingIDS} appendBuildID={appendBuildingID} removeBuildID={removeBuildingID} defaultSelection={defaultSelection} setDefaultSelection={setDefaultSelection} /></TabsContent>
                    <TabsContent value="company"><PageUsersCompanyTableSection selectedCompanyIDS={selectedCompanyIDS} appendCompanyID={appendCompanyID} removeCompanyID={removeCompanyID} defaultSelection={defaultSelection} setDefaultSelection={setDefaultSelection} /></TabsContent>
                    <TabsContent value="person"><PageUsersPersonTableSection personID={personID} setPersonID={setPersonID} /></TabsContent>
                </div>
            </Tabs>
        </div>
    );
};

export default PageAddUserSelections;