<script setup>
import { computed, defineProps } from 'vue'
import { AiOutlineEye } from 'vue-icons-plus/ai'
import { useRouter } from 'vue-router'

const router = useRouter()

const props = defineProps({
    article: {
        type: Object,
        required: true
    }
})

const formattedDate = computed(() => {
    return new Date(props.article.created_at).toLocaleDateString()
})

const discountPrice = computed(() => {
    return (props.article.price * props.article.discount / (100 * 100)).toFixed(2)
})

const showArticle = (article) => {
    // Since there's no id in the data structure, we might need to use title or other identifier
    // For now, just console log the article
    console.log('Selected article:', article)
    router.push(`/posts/${article.id}`)
}

const getBgImage = (id) => {
    const idx = id % 79
    return `background-image: url(/avatar/${idx}.jpeg); background-size: 100% 100%`
}
</script>

<template>
    <div :style="getBgImage(article.id)"
        class="flex flex-col rounded-md overflow-hidden bg-gray-500 bg-no-repeat shadow-lg shadow-gray-500"
        @click="showArticle(article)">
        <div class="flex-1 p-4 backdrop-blur-xl w-full h-full  backdrop-brightness-50">
            <h3 class="text-xl font-semibold text-gray-200 drop-shadow-md drop-shadow-white-100">
                {{ article.title }}
            </h3>


            <div class="flex flex-wrap gap-1">
                <span v-for="tag in article.tags" :key="tag"
                    class="px-2 py-0.5 text-xs bg-blue-50 text-blue-600 rounded-full">
                    {{ tag }}
                </span>
            </div>

            <div class="flex items-center justify-between pt-4 text-sm">
                <div class="flex items-center gap-2 text-gray-100">
                    <AiOutlineEye class="w-4 h-4" />
                    <span>{{ article.view_count || 0 }}</span>
                </div>
                <div class="text-gray-100 font-mono text-lg" v-if="!article.bought">
                    ¥{{ discountPrice }}
                </div>
            </div>
        </div>
    </div>
</template>
