import { getLinkList } from "@/app/_lib/data/link";
import { getLinkType } from "@/app/_lib/data/linkType";
import { LinkBlock } from "@/app/_ui/LinkListBox";
import Search from "@/app/_ui/Search";
import { Suspense } from "react";

export default async function Page({ params }: { params: Promise<{ id: string }> }) {

    const id = (await params).id
    const linkType = await getLinkType(id)
    const { list: linkList } = await getLinkList({ filter: { type: id } })

    return (
        <>
            {/* <HeaderNav></HeaderNav> */}
            <main className="w-full p-5">
                <Suspense fallback={<div>...</div>}>

                    <Search></Search >
                </Suspense>
                <h1 className="text-3xl font-bold mb-6 flex justify-center">{linkType?.label}</h1>
                <div className=" grid grid-cols-3 lg:grid-cols-6 gap-4 ">
                    {
                        linkList.map(val => (
                            <LinkBlock val={val} key={val._id} />

                        ))
                    }
                </div>
            </main>

            {/* <PosterBox posterList={[]} /> */}
        </>



    );
}