<template>
    <article class="post-card">
        <img :src="data.coverImage" />
        <div>
            <small>
                <router-link :to="{ path: '/blog', query: data.category.link }">
                    {{ data.category.title }}
                </router-link>
            </small>
            <h1>
                <router-link :to="'/blog/' + data.link">
                    {{ data.title }}
                </router-link>
            </h1>
            <p>
                {{ removeTags(data.content) }}
            </p>
            <div>
                <span>{{ new Date(data.createdAt).toLocaleDateString('fa') }}</span>
                <router-link :to="'/blog/' + data.link">
                    <Button :label="$t('readMore')" icon="isax isax-arrow-left" severity="secondary" text />
                </router-link>
            </div>
        </div>
    </article>
</template>

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

<style lang="scss">
.post-card {
    box-shadow: 0px 1px 22px 0px rgba(0, 75, 130, 0.15);
    @apply w-[21.3rem] h-[23.3rem] lg:w-[18.3rem] lg:h-[24.3rem] bg-white rounded-2xl p-3 flex flex-col gap-3;

    img {
        @apply w-full h-[10.4rem] bg-[#ECECEC] rounded-xl;
    }

    &>div {
        @apply flex flex-col px-3 grow;

        small {
            @apply text-primary-600 text-xs lg:text-sm font-vazir;
        }

        h1 {
            @apply text-[#191919] font-bold font-vazir mt-1.5 text-sm lg:text-base;
        }

        &>p {
            @apply text-[#7F7F7F] font-vazir mt-2 w-[14.4rem] text-xs leading-5 lg:text-sm lg:leading-[1.4rem] line-clamp-3;
        }

        div {
            @apply flex items-center justify-between mt-auto;

            span {
                @apply text-[#7F7F7F] text-xs lg:text-sm font-normal font-vazir leading-snug;
            }

            button {
                @apply whitespace-nowrap h-10 -ml-3 px-2 text-xs lg:text-sm #{!important};

                .isax {
                    @apply text-xl #{!important};
                }
            }
        }
    }
}
</style>
