import Sort from "@/components/filter-sort-games"
import { PopoverSort } from "@/components/filter-sort-games-mobile"
import { GlobalLayout } from "@/components/global-layout"
import { InfiniteScrollGames } from "@/components/infinity-scroll"
import ScrollToTop from "@/components/scroll-to-top"

// renders a list of games infinitely
export default async function GamesPage() {
    return (
        <GlobalLayout
            mainContent={
                <>
                    <ScrollToTop />

                    <InfiniteScrollGames />

                    <div className="md:hidden">
                        <PopoverSort />
                    </div>
                </>
            }

            sideContent={
                <div className="hidden md:block">
                    <Sort />
                </div>
            }
        />
    )
}