<template>
    <div class="container flex flex-col gap-8">
        <p class="text-[24px] font-bold dark:text-white text-black">Product Variants:</p>
        <div class="flex flex-col gap-4">
            <div v-for="(variant, index) in variants" :key="index" class="flex gap-10">
                <div
                    class="flex items-center gap-15 border border-(--border-light) dark:border-(--border-dark) p-5 rounded-md hover:bg-gray-50 hover:dark:bg-gray-700 bg-(--second-light) dark:bg-(--second-dark) dark:text-white text-black">
                    <img :src="variant.image" :alt="variant.image" class="w-16 h-16 object-cover" />
                    <p class="">{{ variant.name }}</p>
                    <p class="">{{ variant.productNumber }}</p>
                    <p class="">{{ variant.value }}</p>
                    <p class="">{{ variant.price }}</p>
                    <p class="">{{ variant.quantity }}</p>
                    <button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded"
                        @click="addToCart(variant)">
                        Add to Cart
                    </button>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const variants = ref([
    {
        image: 'img',
        name: 'Duży fotelik narożny ',
        productNumber: 'NC209/7000',
        value: '20,000',
        price: '519,00 zł',
        quantity: 10
    },
    {
        image: 'img',
        name: 'Duży fotelik narożny ',
        productNumber: 'NC209/7000',
        value: '20,000',
        price: '519,00 zł',
        quantity: 5
    },
    {
        image: 'img',
        name: 'Duży fotelik narożny ',
        productNumber: 'NC209/7000',
        value: '20,000',
        price: '519,00 zł',
        quantity: 8
    }
])

const addToCart = (variant: any) => {
    console.log('Added to cart:', variant)
}
</script>
