<template>
    <div class="compare-product">
        <template v-if="ids.length > 1">
            <Button icon="isax isax-close-circle5" severity="secondary" text rounded @click="remove" />
        </template>
        <img :src="coverImage" :alt="title">
        <h2>{{ title }}</h2>
        <span>{{ numberFormat(price) }} <small>{{ $t('priceUnit') }}</small></span>
        <Button :label="$t('addToCart')" @click="handleClick" />
    </div>
</template>

<script setup>
const props = defineProps(['data'])
const { coverImage, title, price, _id: id } = props.data

const route = useRoute()
const router = useRouter()
const ids = route.params.ids.split('-')
const remove = () => {
    const temp = ids.filter((item) => item != id)
    router.push('/compare/' + temp.join('-'))
}

const handleClick = () => { }

const numberFormat = (number) =>
    new Intl.NumberFormat('fa-IR', { maximumSignificantDigits: 3 }).format(number)
</script>

<style lang="scss">
.compare-product {
    @apply relative flex flex-col items-center gap-4 w-[10.7rem] h-[16.6rem] lg:w-[28.1rem] lg:h-[25.6rem] pb-[1.7rem];

    &>button.p-button-icon-only {
        @apply absolute left-0 -top-4 p-0 text-[1.4em] lg:text-[1.6em] #{!important};
    }

    img {
        @apply w-20 h-20 lg:w-[12.5rem] lg:h-[12.5rem];
    }

    &>h2 {
        @apply w-[8.4rem] lg:w-[18.8rem] text-center text-zinc-800 text-sm lg:text-lg font-medium font-vazir mt-2.5 mb-0.5;
        @apply truncate;
    }


    &>span {
        @apply text-zinc-800 text-sm lg:text-lg font-medium font-vazir;

        small {
            @apply text-zinc-800 text-[0.7em] lg:text-[0.8em] font-medium font-vazir;
        }
    }

    &>button:last-child {
        @apply w-[6.4rem] h-[2.1rem] p-0 lg:w-[9.8rem] lg:h-12 shrink-0;

        .p-button-label {
            @apply text-white text-xs lg:text-base font-bold font-iran-sans;
        }
    }
}
</style>