<template>
    <div class="header-cart-list-item">
        <span>{{ quantity }}x</span>
        <img :src="data.coverPath" />
        <div>
            <h3>{{ data.category[data.category.length - 1]?.name }}</h3>
            <h2>{{ data.title }}</h2>
            <span>
                <b>{{ numberFormat(data.specialPrice || data.price) }} </b>
                {{ $t('priceUnit') }}
            </span>
        </div>
        <Button icon="isax isax-trash" severity="secondary" text @click="$emit('remove', data.id)" />
    </div>
</template>

<script setup>
defineProps(['data', 'quantity'])

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

<style lang="scss">
.header-cart-list-item {
    box-shadow: 0px 2px 12px #004b8226;
    @apply flex p-2 pl-6 w-[26.9rem] h-[10.1rem] bg-white rounded-lg shadow border relative;

    &>span {
        @apply absolute left-5 top-4 text-xs font-poppins;
    }

    img {
        @apply w-[9.2rem] h-[9.2rem] p-2;
    }

    div {
        @apply w-max gap-1 flex flex-col py-4 font-vazir mr-6;

        h3 {
            @apply text-right text-neutral-400 text-[0.9em] font-medium;
        }

        h2 {
            @apply w-[13.1rem] h-14 text-right text-zinc-800 text-[1.1em] font-bold line-clamp-2;
        }

        span {
            @apply text-zinc-800 text-[0.9em] mt-auto;
        }
    }

    button {
        @apply w-10 h-10 mb-2 -mx-2 shrink-0 self-end text-2xl text-[#7F7F7F] rounded-full #{!important};
    }
}
</style>
