import React from 'react';
import { Head, Link } from '@inertiajs/react';
import DashboardLayout from '@/Layouts/DashboardLayout';
import ProductCard from '@/Components/ProductCard';
import { HeartCrack } from 'lucide-react';
import { Button } from "@/Components/ui/button";
import { useTranslation } from '@/hooks/useTranslation';

export default function Favorites({ favorites }) {
    const { t } = useTranslation();

    return (
        <DashboardLayout mode="buyer">
            <Head title={t('My Favorites')} />

            <div className="mb-6">
                <h1 className="text-2xl font-bold tracking-tight text-foreground">{t('My Favorites')}</h1>
                <p className="text-muted-foreground">{t('Products you have saved for later.')}</p>
            </div>

            {favorites.data.length === 0 ? (
                <div className="flex flex-col items-center justify-center py-20 bg-card rounded-xl border border-dashed text-center">
                    <HeartCrack className="w-16 h-16 text-muted-foreground/30 mb-4" />
                    <h3 className="text-lg font-bold mb-2">{t('No favorites yet')}</h3>
                    <p className="text-muted-foreground text-sm mb-6 max-w-xs">
                        {t('When you see a product you like, click the heart icon to save it here.')}
                    </p>
                    <Button asChild className="rounded-full px-8">
                        <Link href="/">{t('Start Sourcing')}</Link>
                    </Button>
                </div>
            ) : (
                <div className="grid grid-cols-2 md:grid-cols-3 xl:grid-cols-4 gap-4 md:gap-6">
                    {favorites.data.map(product => (
                        <ProductCard key={product.id} product={product} />
                    ))}
                </div>
            )}

            {/* Pagination Controls */}
            {favorites.links && favorites.links.length > 3 && (
                <div className="flex justify-center items-center mt-10">
                    <div className="flex gap-1 overflow-x-auto no-scrollbar">
                        {favorites.links.map((link, i) => (
                            <Link
                                key={i} href={link.url || '#'}
                                className={`px-3 py-1.5 border rounded-md text-xs font-medium transition-colors ${
                                    link.active 
                                        ? 'bg-primary text-primary-foreground border-primary shadow-sm' 
                                        : 'bg-background hover:bg-muted text-foreground'
                                } ${!link.url && 'opacity-50 cursor-not-allowed'}`}
                                dangerouslySetInnerHTML={{ __html: link.label }}
                            />
                        ))}
                    </div>
                </div>
            )}
        </DashboardLayout>
    );
}