import { GET } from "@/utils/get";
import { Category, Package } from "@/types/models";
import { getTranslations } from "next-intl/server";
import { ProgramsFilter } from "../programs/(all)/_components/filter";
import { PackagesContainer } from "../programs/packages/_components/packages-container";

export const generateMetadata = async () => {
    const t = await getTranslations();
    return {
        title: t("routes.packages"),
        description: t("packages.subtitle"),
    };
};

export default async function PackagesPage({
    searchParams,
}: {
    searchParams: Promise<Record<string, any>>;
}) {
    const t = await getTranslations();
    const params = await searchParams;

    const data = await GET({ url: "/packages", searchParams: params });

    if (!data) {
        return (
            <div className="flex flex-col items-center justify-center p-20 text-center w-full">
                <h2 className="text-2xl font-bold text-red-600 mb-2">{t("custom.failed")}</h2>
                <p className="text-gray-600">{t("custom.try-again")}</p>
            </div>
        );
    }

    const packages: Package[] = data?.packages?.data ?? [];
    const categories: Category[] = data?.categories ?? [];

    return (
        <main className="grid md:grid-cols-3 gap-8 min-h-dvh box py-8">
            {/* Sidebar Filter — desktop */}
            <div className="hidden md:block">
                <ProgramsFilter categories={categories} />
            </div>

            {/* Packages Grid — with mobile filter sheet built-in */}
            <PackagesContainer packages={packages} categories={categories} />
        </main>
    );
}