<template>
    <div class="blog-share">
        <i class="isax isax-hierarchy-2"></i>
        <h3>{{ $t("share") }}</h3>
        <ul>
            <li v-for="(item, i) in items" :key="i">
                <a :href="item.url" target="_blank">
                    <img :src="`/icons/${item.icon}.svg`" />
                </a>
            </li>
            <li @click="copyToClipboard()">
                <i class="isax isax-link-21"></i>
            </li>
        </ul>
    </div>
</template>

<script setup>
const { post: { title } } = inject('data')
const { toast, t } = inject('service')
const route = useRoute();
const path = document.location.href;
const items = reactive([
    { icon: "linkedin", url: `https://www.linkedin.com/sharing/share-offsite/?title=${title}&url=${path}` },
    { icon: "telegram", url: `https://t.me/share/url?text=${title}&url=${path}` },
    { icon: "whatsapp", url: `https://api.whatsapp.com/send?text=${title} ${path}` },
    { icon: "twitter", url: `http://twitter.com/share?text=${title}&url${path}` },
]);
const copyToClipboard = () => {
    toast.add({ life: 3000, severity: 'success', summary: t('success'), detail: t('copied') })
    navigator.clipboard.writeText(path)
};
</script>

<style lang="scss">
.blog-share {
    @apply w-auto lg:w-[26.8rem] lg:max-w-[26.8rem] flex items-center rounded-[0.6rem] relative max-lg:mx-6;
    @apply flex-col lg:flex-row lg:h-14 lg:overflow-hidden lg:bg-zinc-100 gap-4 lg:gap-0;

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

    h3 {
        @apply bg-neutral-200 w-full sm:w-[9.3rem] h-10 sm:h-full text-zinc-900;
        @apply font-medium font-vazir leading-[1.9rem] items-center justify-center;
        @apply text-lg hidden lg:flex;
    }

    ul {
        @apply w-[14.3rem] flex gap-6 justify-center items-center grow h-9 text-[#333333] relative;
        @apply bg-white rounded-[0.3rem] shadow-[0px_0px_10px_10px_#0000000a] z-[1];
        @apply lg:shadow-none lg:h-full lg:bg-[#F2F2F2];

        li {
            img {
                @apply w-5 h-5 lg:w-6 lg:h-6 object-scale-down object-bottom brightness-[0.45];
            }

            i {
                @apply text-xl lg:text-[1.6em] lg:leading-9 cursor-pointer;
            }
        }

        &::after {
            @apply max-lg:content-['_'] w-4 h-4 transform rotate-45 bg-white absolute -top-2 rounded;
        }
    }

    &::after {
        @apply max-lg:content-['_'] absolute bottom-4 inset-x-0 h-0.5 bg-[#E5E5E5] z-0;
    }
}
</style>
