<template>
    <div class="w-full p-[50px] bg-bg-light dark:bg-bg-dark border border-button rounded-2xl h-full">
        <div class="flex items-center h-[205px]" v-if="productStore.productList">
            <div class="w-[205px] h-full flex items-center justify-center">
                <img :src="`https://www.yourgold.cz/api/public/file/${productStore.productList[0]?.cover_picture_uuid}.webp`"
                    alt="pics" class="w-auto h-full" />
            </div>
            <div class="flex flex-col justify-between h-full w-full gap-[7px] sm:gap-[15px] max-w-[250px]"
                @click="productStore.addToCart(productStore.productList[0])">
                <h3
                    class="text-[10px] sm:text-base md:text-lg text-xl font-bold leading-[130%] sm:leading-[150%] text-bg-dark">
                    {{ productStore.productList[0]?.name }}
                </h3>
                <div class="">
                    <p
                        class="text-accent-green-light font-inter text-[12px] sm:text-[21px] md:text-2xl leading-[150%] font-bold">
                        {{ productStore.productList[0]?.formatted_price }}
                    </p>
                    <div class="">

                    </div>
                </div>
            </div>
        </div>
        <UiButtonArrow class="w-full" type="fill" :arrow="true">Přejít k pokladně</UiButtonArrow>
    </div>
</template>

<script lang="ts" setup>
const productStore = useProductStore()
</script>