import { GET } from "@/utils/get";
import { LearningPath } from "@/types/models";
import { getTranslations } from "next-intl/server";
import { LearningPathBox } from "./_components/learning-path-box";

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

export default async function LearningPaths() {
    const t = await getTranslations();
    const paths = await GET({ url: "/user/learning-paths", context: "dashboard" });

    // The API might return an error or null if not authenticated or empty
    const pathsList = Array.isArray(paths) ? paths : [];

    return (
        <main className="p-4 space-y-8 dark:bg-zinc-950 min-h-screen">
            <h1 className="text-3xl font-bold text-gray-900 dark:text-white">
                {t("routes.learning_paths") || "Learning Paths"}
            </h1>

            <section className="grid md:grid-cols-2  gap-6">
                {
                    pathsList.length > 0 ?
                        pathsList.map((path: LearningPath, index: number) => (
                            <div key={index} className="transition-transform hover:scale-[1.02] duration-300 h-full">
                                <LearningPathBox path={path} />
                            </div>
                        ))
                        :
                        <div className="md:col-span-3 flex flex-col items-center justify-center min-h-[40dvh] text-gray-500 space-y-4">
                            <div className="p-4 bg-gray-100 rounded-full dark:bg-zinc-800">
                                {/* Using an SVG Icon inline or import */}
                                <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="lucide lucide-folder-open"><path d="m6 14 1.45-2.9A2 2 0 0 1 9.24 10H20a2 2 0 0 1 1.94 2.5l-3.25 7a2 2 0 0 1-1.94 1.5H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H20a2 2 0 0 1 2 2v2"/></svg>
                            </div>
                            <p className="font-semibold text-lg">{t('custom.no results') || "No learning paths found"}</p>
                        </div>
                }
            </section>
        </main>
    );
};