"use server";
import HeroContainer from "./herocontainer";
import DualLabelSwitch from "./switch";
import BlogPost from "./blogpost";
import LeagueTable from "./leaguetable";
import IndexExtension from "./indexExtension";
import TelegramBanner from "./telegramBanner";
import FixPredictionConainer from "./fixpredictcontainer";
import { Suspense } from 'react'


const FixPredictContainer = ({ path }: { path: string }) => {

    return(
        <div className="rounded-2xl col-span-2 mb-4 md:mb-0">
            <FixPredictionConainer path={path} />
            <BlogPost />
        </div>
    )
}

const TableContainer = () => {
    return (
        <div className="md:h-[85vh] rounded-sm md:overflow-y-scroll custom-scroll md:sticky md:top-18">
            <LeagueTable comp={"soccer_epl"} />
            <LeagueTable comp={"soccer_spain_la_liga"} />
        </div>
    )
}



export default async function IndexPage({ params }: { params: { predictions: string } }) {

    const { predictions } = await params;
    const path = predictions.replace('_', ' ').replace('-', '/');

    return (
        <>
            <HeroContainer />
            <Suspense>
                <DualLabelSwitch />
            </Suspense>
            <div className="md:grid md:grid-cols-3 md:gap-4 m-4 lg:px-24">
                <FixPredictContainer path={path} />
                <TableContainer />
            </div>
            <IndexExtension />
            <TelegramBanner />
        </>
    );
}