import { GET } from "@/utils/get";
import { Certificate, Program } from "@/types/models";
import { getTranslations } from "next-intl/server";
import { CertificateBox } from "./_components/certificate-box";

export const generateMetadata = async () => {
    const t = await getTranslations();
    return {
        title: `${t('routes.certificates')}` || "Mwaheb"
    }
};

export default async function CertificatesPG({ searchParams }) {
    const t = await getTranslations();
    const params = await searchParams

    const data = await GET({
        url: "/user/certifications/get/all",
        context: "dashboard",
        searchParams: params,
    });
    const certificates: Certificate[] = data?.data || [];

    return (
        <main className="p-4 bg-white space-y-8">
            <h1 className="text-2xl font-bold">
                {t("routes.certificates")}
            </h1>
            <section className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                {
                    certificates?.length > 0 ?
                        certificates?.map((certificate: any, index: number) => (
                            <CertificateBox key={index} certificate={certificate} />
                        ))
                        :
                        <div className="grid place-items-center min-h-[50dvh] md:col-span-3 font-semibold">
                            {t('custom.no results')}
                        </div>
                }
            </section>
        </main>
    );
};