<template>
    <div class="seller-profile">
        <span v-if="shop.rate > -1">
            <small>{{ shop.rate }}</small>
            <i class="isax isax-star-15" />
        </span>
        <div>
            <picture>
                <img :src="shop?.userID?.profilePhoto">
            </picture>
            <div>
                <h2>{{ shop.shopName }}</h2>
                <span>
                    {{ $t('registerDate') }} : {{ new Date(shop.createdAt).toLocaleDateString('fa-IR') }}
                </span>
            </div>
        </div>
        <PanelSellerMenu v-if="device == 'desktop'" />
    </div>
</template>

<script setup>
const { device } = inject('service')
const { shop } = inject('data')
</script>

<style lang="scss">
.seller-profile {
    @apply w-full md:w-[21.4rem] min-h-[6.4rem] lg:w-[18.3rem] lg:h-[30rem] rounded-[0.6rem] border-2 border-neutral-200 relative;

    &>span {
        @apply absolute left-4 top-4 lg:left-3 lg:top-3 flex items-center gap-2;

        i {
            @apply text-lg text-[#FFB628] -mt-0.5;
        }

        small {
            @apply text-zinc-800 text-sm font-medium font-poppins;
        }
    }

    &>div {
        @apply flex lg:flex-col gap-[1.1rem] lg:gap-3 items-center max-lg:h-full max-lg:pr-4 lg:pt-7 lg:pb-4;

        picture {
            @apply flex w-[4.1rem] h-[4.1rem] lg:w-[5.6rem] lg:h-[5.6rem] rounded-full border border-[#47B556];

            img {
                @apply w-[3.6rem] h-[3.6rem] lg:w-[4.9rem] lg:h-[4.9rem] bg-zinc-300 rounded-full m-auto;
            }
        }

        &>div {
            @apply flex flex-col lg:items-center gap-5;

            h2 {
                @apply text-zinc-800 text-xs lg:text-base font-medium font-vazir;
            }

            span {
                @apply text-zinc-500 text-[0.6em] lg:text-xs font-medium font-vazir;
            }
        }
    }


}
</style>