<template>
    <router-link :to="'/blog/' + link" :class="['post-item', `post-item-${type}`]">
        <article>
            <img :src="coverImage" :alt="title" />
            <div>
                <h3>{{ removeTags(title) }}</h3>
                <div v-if="type != 'vertical'">
                    <p>{{ removeTags(content) }}</p>
                </div>
                <Button v-if="type == 'normal'" v-bind="btn.props" />
            </div>
        </article>
    </router-link>
</template>

<script setup>
import init from '../../initialize/post-item'
const { btn } = init()

const props = defineProps({
    type: { default: 'normal' },
    data: {},
});
const removeTags = (str) => {
    if (str === null || str === '') return false
    else str = str.toString()
    return str.replace(/(<([^>]+)>|&nbsp;)+/gi, '')
}

const { link, coverImage, title, content } = props.data
</script>

<style lang="scss">
.post-item {
    article {
        @apply flex gap-3 lg:gap-6;

        img {
            @apply object-contain object-center;
        }

        &>div {
            @apply flex flex-col overflow-hidden font-vazir;

            h3 {
                @apply text-zinc-800 font-bold truncate h-8;
            }

            p {
                @apply text-zinc-500 lg:leading-[1.9rem];
                overflow: hidden !important;
                display: -webkit-box !important;
                -webkit-box-orient: vertical !important;
                -webkit-line-clamp: 3 !important;
            }
        }
    }
}

.post-item-normal {
    article {
        @apply w-[21.4rem] min-h-[4.7rem];
        @apply lg:w-[55.9rem] lg:h-[11.9rem];

        img {
            @apply w-[4.7rem] h-[4.7rem] lg:w-[15.1rem] lg:h-[11.9rem] object-cover;
        }

        &>div {
            @apply flex flex-col justify-between lg:justify-center;
            @apply gap-1 lg:gap-6;

            h3 {
                @apply text-xs lg:text-xl whitespace-normal h-8;
            }

            p {
                @apply hidden lg:block w-[39.4rem] line-clamp-3;
            }

            button {
                @apply w-max h-max text-[#4D88B7] py-1.5 px-3.5 -mr-3.5 -my-1.5 #{!important};

                .p-button-label {
                    @apply font-normal font-vazir text-[0.7em] lg:text-base;
                }

                .isax {
                    @apply text-base lg:text-2xl mr-1 #{!important};
                }
            }
        }
    }
}

.post-item-small {
    article {
        @apply w-[21.4rem] h-[4.7rem] lg:w-[26.1rem] lg:h-[7.7rem];

        img {
            @apply w-[4.8rem] h-[4.8rem] lg:w-[7.7rem] lg:h-[7.7rem];
        }

        &>div {
            @apply gap-2 lg:gap-0.5 justify-center;

            h3 {
                @apply text-xs lg:text-base lg:leading-[2.8rem];
            }

            p {
                @apply text-[0.7em] lg:text-base lg:w-[16.9rem] line-clamp-2;
            }

            button {
                @apply hidden;
            }
        }
    }
}

.post-item-vertical {
    article {
        @apply flex-col gap-3 lg:gap-4 w-[9.9rem] lg:w-[18.3rem];

        img {
            @apply w-full h-[9.9rem] lg:h-[18.3rem] object-cover;
        }

        &>div h3 {
            @apply text-xs lg:text-base leading-6 line-clamp-3 lg:line-clamp-2 whitespace-break-spaces;
        }
    }
}
</style>
