<template>

    <div class="dark:bg-gray-600 antialiased">
        <div class="max-w-screen-xl px-4 mx-auto 2xl:px-0">
    
            <div class="flex py-6 dark:text-white">
            
            <span class="px-4 text-md lg:text-xl text-gray-700 lg:font-bold font-medium dark:text-white">New Arrivals</span>
            
            </div>
    
            <div class="container mx-auto px-4 pb-8">
                
                <div class="relative">
                    <div class="relative overflow-hidden">
                        <div class="flex overflow-hidden snap-x snap-mandatory scroll-smooth" ref="carousel">
                            <!-- Slide 1 -->
                            <a href="/product/dlb851d2" class="flex-none w-full md:w-1/4 p-2 snap-start" aria-label="DLB851D2 Gas Spring Monitor Stand">
                                <div class="relative flex justify-center items-center p-2 bg-gray-200">
                                    <img src="@images/newArrival/new_1.png" alt="DLB851D2 Gas Spring Monitor Stand" class="h-100 object-cover">
                                    <button
                                        class="absolute top-2 right-2 p-2 z-100 text-white hover:text-red-500"
                                        @click.prevent="toggleWishlist($event, 'DLB851D2')"
                                    >
                                        <font-awesome-icon
                                            :icon="['fa', wishlist.includes('DLB851D2') ? 'heart' : 'heart']"
                                            size="lg"
                                            :class="wishlist.includes('DLB851D2') ? 'text-red-500' : 'text-white'"
                                        />
                                    </button>
                                </div>
                                <div class="mt-2 w-full text-sm dark:text-white">
                                    <span class="font-bold">DLB851D2</span><br />
                                    <span class="text-gray-600 dark:text-gray-100">Gas Spring Monitor Stand</span><br /><br />
                                    <span class="font-bold">RM329<br />new</span>
                                </div>
                            </a>
                            <!-- Slide 2 -->
                            <a href="/product/slev-30-m-stripe" class="flex-none w-full md:w-1/4 p-2 snap-start" aria-label="SLEV.30 M-STRIPE Premium pre-braided cables">
                                <div class="relative flex justify-center items-center p-2 bg-gray-200">
                                    <img src="@images/newArrival/new_2.png" alt="SLEV.30 M-STRIPE Premium pre-braided cables" class="h-100 object-cover">
                                    <button
                                        class="absolute top-2 right-2 p-2 z-100 text-white hover:text-red-500"
                                        @click.prevent="toggleWishlist($event, 'SLEV.30 M-STRIPE')"
                                    >
                                        <font-awesome-icon
                                            :icon="['fa', wishlist.includes('SLEV.30 M-STRIPE') ? 'heart' : 'heart']"
                                            size="lg"
                                            :class="wishlist.includes('SLEV.30 M-STRIPE') ? 'text-red-500' : 'text-white'"
                                        />
                                    </button>
                                </div>
                                <div class="mt-2 w-full text-sm dark:text-white">
                                    <span class="font-bold">SLEV.30 M-STRIPE</span><br />
                                    <span class="text-gray-600 dark:text-gray-100">Premium pre-braided cables</span><br /><br />
                                    <span class="font-bold">RM70<br />new</span>
                                </div>
                            </a>
                            <!-- Slide 3 -->
                            <a href="/product/pny-xlr8-ps5" class="flex-none w-full md:w-1/4 p-2 snap-start" aria-label="PNY XLR8 PS5 SSD Cover with Integrated Heatsink">
                                <div class="relative flex justify-center items-center p-2 bg-gray-200">
                                    <img src="@images/newArrival/new_3.png" alt="PNY XLR8 PS5 SSD Cover with Integrated Heatsink" class="h-100 object-cover">
                                    <button
                                        class="absolute top-2 right-2 p-2 z-100 text-white hover:text-red-500"
                                        @click.prevent="toggleWishlist($event, 'PNY XLR8 PS5')"
                                    >
                                        <font-awesome-icon
                                            :icon="['fa', wishlist.includes('PNY XLR8 PS5') ? 'heart' : 'heart']"
                                            size="lg"
                                            :class="wishlist.includes('PNY XLR8 PS5') ? 'text-red-500' : 'text-white'"
                                        />
                                    </button>
                                </div>
                                <div class="mt-2 w-full text-sm dark:text-white">
                                    <span class="font-bold">PNY XLR8 PS5<sup>TM</sup></span><br />
                                    <span class="text-gray-600 dark:text-gray-100">SSD Cover with Integrated Heatsink</span><br /><br />
                                    <span class="font-bold">RM159<br />new</span>
                                </div>
                            </a>
                            <!-- Slide 4 -->
                            <a href="/product/orico-mdk" class="flex-none w-full md:w-1/4 p-2 snap-start" aria-label="ORICO MDK Type-C Multifunctional Docking Station">
                                <div class="relative flex justify-center items-center p-2 bg-gray-200">
                                    <img src="@images/newArrival/new_4.png" alt="ORICO MDK Type-C Multifunctional Docking Station" class="h-100 object-cover">
                                    <button
                                        class="absolute top-2 right-2 p-2 z-100 text-white hover:text-red-500"
                                        @click.prevent="toggleWishlist($event, 'ORICO MDK')"
                                    >
                                        <font-awesome-icon
                                            :icon="['fa', wishlist.includes('ORICO MDK') ? 'heart' : 'heart']"
                                            size="lg"
                                            :class="wishlist.includes('ORICO MDK') ? 'text-red-500' : 'text-white'"
                                        />
                                    </button>
                                </div>
                                <div class="mt-2 w-full text-sm dark:text-white">
                                    <span class="font-bold">ORICO MDK</span><br />
                                    <span class="text-gray-600 dark:text-gray-100">Type-C Multifunctional Docking Station</span><br /><br />
                                    <span class="font-bold">RM69-89<br />new</span>
                                </div>
                            </a>
                            <!-- Slide 5 -->
                            <a href="/product/darkflash-dlc31" class="flex-none w-full md:w-1/4 p-2 snap-start" aria-label="DARKFLASH DLC31 Mini Gray M-ATX PC Case">
                                <div class="relative flex justify-center items-center p-2 bg-gray-200">
                                    <img src="@images/newArrival/new_5.png" alt="DARKFLASH DLC31 Mini Gray M-ATX PC Case" class="h-100 object-cover">
                                    <button
                                        class="absolute top-2 right-2 p-2 z-100 text-white hover:text-red-500"
                                        @click.prevent="toggleWishlist($event, 'DARKFLASH DLC31')"
                                    >
                                        <font-awesome-icon
                                            :icon="['fa', wishlist.includes('DARKFLASH DLC31') ? 'heart' : 'heart']"
                                            size="lg"
                                            :class="wishlist.includes('DARKFLASH DLC31') ? 'text-red-500' : 'text-white'"
                                        />
                                    </button>
                                </div>
                                <div class="mt-2 w-full text-sm dark:text-white">
                                    <span class="font-bold">DARKFLASH DLC31</span><br />
                                    <span class="text-gray-600 dark:text-gray-100">Mini Gray M-ATX PC Case</span><br /><br />
                                    <span class="font-bold">RM165 - 249<br />new</span>
                                </div>
                            </a>
                        </div>
                        <!-- Slider controls -->
                        <button type="button" class="absolute top-1/2 left-0 p-2 bg-gray-300 rounded-full scroll-left-button" @click="scrollLeft">
                            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
                            </svg>
                        </button>
                        <button type="button" class="absolute top-1/2 right-0 p-2 bg-gray-300 rounded-full scroll-right-button" @click="scrollRight">
                            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                            </svg>
                        </button>
                    </div>
                </div>

    
    
    
            </div>
        </div>
    </div>
    </template>    
    
    <script setup>
        import { ref } from 'vue';
        import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
    
            const scrollLeft = () => {
            const container = document.querySelector('.scroll-smooth');
            container.scrollBy({
                left: -container.offsetWidth / 4, 
                behavior: 'smooth',
            });
            };
    
            const scrollRight = () => {
            const container = document.querySelector('.scroll-smooth');
            container.scrollBy({
                left: container.offsetWidth / 4, 
                behavior: 'smooth',
            });
            };
    
            const wishlist = ref([]); // Array to store wishlist items
    
            const toggleWishlist = (event, productId) => {
            event.preventDefault(); // Prevent the default link behavior
    
            // Toggle the heart icon and add/remove from wishlist
            if (wishlist.value.includes(productId)) {
                wishlist.value = wishlist.value.filter(item => item !== productId);
            } else {
                wishlist.value.push(productId);
            }
            };
    </script>
    
    

<style scoped>
    button {
    transition: color 0.3s ease;
    }

    button:hover {
    color: red;
    }
</style>
