import Image from "next/image";
import { GET } from "@/utils/get";
import { URL_IMAGE } from "@/utils/url";
import { SaudiRiyal, ShoppingBag, Sparkles } from "lucide-react";
import { getTranslations } from "next-intl/server";
import { Badge } from "@/components/ui/badge";

import { PurchaseCard } from "./_components/purchase-card";

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

export default async function PurchasesPG() {
    const t = await getTranslations();
    const data = await GET({ url: "/payment/history", context: "dashboard" });
    const purchases = data?.data?.data;
    return (
        <main className="p-4 bg-white dark:bg-zinc-950 space-y-8">
            <h1 className="text-2xl font-bold">
                {t("routes.purchases")}
            </h1>
           <section className="grid md:grid-cols-2 gap-6">
    {
        purchases?.length > 0 ?
            purchases?.map((history: any, index: number) => (
                <PurchaseCard key={index} history={history} />
            ))
            :
            <div className="md:col-span-2 flex flex-col items-center justify-center min-h-[50dvh] text-gray-500 space-y-6">
                <div className="relative">
                    {/* Glow effect */}
                    <div className="absolute inset-0 bg-primary-tw-200/30 dark:bg-primary-tw-800/20 rounded-full blur-2xl animate-pulse" />
                    {/* Icon container */}
                    <div className="relative p-8 bg-gradient-to-br from-gray-50 to-gray-100 dark:from-zinc-800 dark:to-zinc-900 rounded-3xl border-2 border-gray-200 dark:border-zinc-700 shadow-xl">
                        <ShoppingBag className="size-20 text-gray-400 dark:text-gray-600" strokeWidth={1.5} />
                    </div>
                </div>
                <div className="text-center space-y-2">
                    <p className="font-bold text-xl text-gray-700 dark:text-gray-300">{t('custom.no results')}</p>
                    <p className="text-sm text-gray-500 dark:text-gray-400">لا توجد مشتريات حالياً</p>
                </div>
            </div>
    }
</section>
        </main>
    );
};