<template>
    <div class="other-seller-item">
        <div>
            <div>
                <i class="isax isax-shop"></i>
                <h3>{{ title }}</h3>
            </div>
            <p>
                <small>{{ percent }}%</small>
                <span>{{ $t("satisfaction") }}</span>
                <span>{{ $t("performance") }} {{ $t(performance) }}</span>
            </p>
        </div>
        <div>
            <p v-for="(item, i) in items" :key="i">
                <i :class="item.icon"></i>
                <span>{{ item.label }}</span>
            </p>
        </div>
        <div>
            <Button :label="$t('show')" size="small" />
            <span>
                <b>{{ price }}</b>
                <small>{{ $t("priceUnit") }}</small>
            </span>
        </div>
    </div>
</template>

<script setup>
const props = defineProps({
    title: { type: String, default: "فروشگاه اسپیس" },
    percent: { type: Number, default: 50 },
    performance: { type: String, default: "veryGood" },
    shippingDesc: {
        type: String,
        default: "ارسال از فروشنده پس از تایید نهایی 1-2 روز دیگر",
    },
    warranty: { type: String, default: "گارانتی 12 ماهه اسپیس" },
    price: { type: String, default: "580,000" },
});

const items = reactive([
    { icon: "isax isax-box", label: props.shippingDesc },
    { icon: "isax isax-shield-tick", label: props.warranty },
]);
</script>

<style lang="scss">
.other-seller-item {
    @apply w-full flex flex-col gap-4 justify-center relative;
    @apply lg:flex-row xl:gap-8 lg:justify-between lg:items-center lg:bg-neutral-50 lg:rounded-[10px];
    @apply lg:h-28 lg:px-4 xl:px-6;


    & > div:nth-of-type(1) {
        @apply flex flex-col gap-3 pb-4 border-b lg:border-b-0 xl:pr-4 lg:pb-0;

        & > div {
            @apply flex gap-3 lg:gap-4 items-center;

            i {
                @apply text-xl lg:text-2xl;
            }

            h3 {
                @apply text-zinc-800 text-xs lg:text-xl font-medium font-vazir;
            }
        }

        p {
            @apply flex flex-wrap whitespace-nowrap items-center gap-1 xl:mr-10 font-vazir;

            small {
                @apply text-[#019907] text-[11.20px] lg:text-base;
            }

            span {
                @apply text-right text-[#999999] text-[11.20px] lg:text-base;

                &:first-of-type {
                    @apply pl-3 lg:pl-4 relative;

                    &::after {
                        @apply content-['_'] w-px bg-[#D9D9D9] h-4 absolute left-0.5 lg:left-1 top-1/2 -translate-y-1/2;
                    }
                }
            }
        }
    }

    & > div:nth-of-type(2) {
        @apply flex flex-col 2xl:flex-row gap-4 2xl:gap-40;

        & > p {
            @apply flex items-center gap-2 pb-4 border-b lg:border-b-0 lg:pb-0;

            i {
                @apply text-xl;
            }

            span {
                @apply text-[#999] font-medium font-vazir text-[11.20px] lg:text-base;
            }
        }
    }

    & > div:nth-of-type(3) {
        @apply h-max flex justify-between items-center pb-[30px] border-b lg:border-b-0;
        @apply lg:flex-row-reverse lg:gap-4 xl:gap-6 2xl:gap-8 lg:pb-0;

        & > span {
            @apply font-vazir text-[#4C4C4C];

            b {
                @apply text-xs lg:text-[25px] font-medium;
            }

            small {
                @apply text-xs lg:text-xl mr-1;
            }
        }

        button {
            @apply w-[147px] h-[41px] lg:w-[153px] lg:h-11 #{!important};

            span {
                @apply font-iran-sans text-sm lg:text-lg font-medium;
            }
        }
    }
}
</style>
