'use client';

import React, { useState, useEffect, useRef } from 'react';
import { usePathname } from 'next/navigation';
import { WishlistItems } from '@/src/components/dashboard/wishlistItems';
import { DashboardSkeleton } from '@/src/components/skeleton/dashboard';

export default function WishlistPage() {
    const pathname = usePathname();
    const [isLoading, setIsLoading] = useState(false);
    const hasLoaded = useRef(false);

    useEffect(() => {
        if (!hasLoaded.current) {
            setIsLoading(true);
            const timer = setTimeout(() => {
                setIsLoading(false);
                hasLoaded.current = true;
            }, 300);
            return () => clearTimeout(timer);
        }
    }, []);

    useEffect(() => {
        if (hasLoaded.current) {
            setIsLoading(false);
        }
    }, [pathname]);

    if (isLoading) return <DashboardSkeleton />;

    return <WishlistItems />;
}