<script lang="ts" setup>
// types

type Props = {
    isSelected: boolean;
    variantDetail: ProductVariant;
};

// props

defineProps<Props>();
</script>

<template>
    <div
        :class="isSelected ? 'border-blue-500' : 'border-slate-300'"
        class="transition-all min-w-[350px] w-full duration-100 p-4 rounded-150 border-[2px] flex gap-4 cursor-pointer"
    >
        <div>
            <div
                :class="isSelected ? 'ring-blue-500 bg-blue-500' : 'ring-slate-300 bg-slate-300'"
                class="size-3 mt-2 ring-2 ring-offset-2 rounded-full"
            ></div>
        </div>
        <div class="w-full">
            <div class="w-full flex justify-between items-center gap-2">
                <span class="text-md sm:text-xl font-medium">
                    {{ variantDetail!.discount > 0 ? variantDetail!.price_after_discount : variantDetail!.price }}
                </span>
                <div
                    v-if="variantDetail.in_stock > 0 && variantDetail.discount > 0"
                    class="text-white mb-1 px-3 py-1 bg-blue-500 text-xs rounded-full w-fit flex items-center justify-center gap-1"
                >
                    <Icon
                        name="ci:bi-percent"
                        class="size-3.5"
                    />
                    <span class="mt-px">
                        {{ variantDetail.discount }}
                    </span>
                </div>
                <div
                    v-if="variantDetail.in_stock === 0"
                    class="text-slate-700 mb-1 px-3 py-1 bg-slate-200 text-xs rounded-full w-fit flex items-center justify-center gap-1"
                >
                    اتمام موجودی
                </div>
            </div>
            <div class="w-full flex items-center flex-wrap gap-3 max-w-[400px] mt-4">
                <!--                <div-->
                <!--                    class="flex items-center gap-2 text-sm rounded-full border border-slate-400 px-4 h-[40px]"-->
                <!--                >-->
                <!--                    <span>رنگ</span>-->
                <!--                    <ColorCircle class="size-[22px]" :style="{backgroundColor:variantDetail.color}" />-->
                <!--                </div>-->

                <div
                    v-for="attribute in variantDetail.product_attributes"
                    class="flex items-center gap-2 text-xs sm:text-sm rounded-full border border-slate-400 px-3 sm:px-4 h-[35px] sm:h-[40px]"
                >
                    <span>{{ attribute.attribute_type.name }}</span>
                    <span>{{ attribute.value }}</span>
                </div>
            </div>
        </div>
    </div>
</template>
