import { useRoutes } from "@/hooks/useRoutes";
import Search from "../Search";
import Dashboard from "../Dashboard";
import Installed from "../Installed";
import Settings from "../Settings";
import FeaturedPlugins from "../FeaturedPlugins";
import Group from "../Group";

const Main = () => {

    const { isInstalled, isSearch, isRoot, isSettings, isFeatured, isGroup } = useRoutes()
    
    return(
        <div className="m-2 md:m-4 md:ml-0 rounded-lg bg-white grow overflow-hidden">
            {isInstalled && <Installed />}

            {isRoot && <Dashboard />}

            {isSearch && <Search />}

            {isSettings && <Settings />}

            {isFeatured && <FeaturedPlugins />}

            {isGroup && <Group />}
        </div>
    )

}

export default Main;