<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}`)
}

</script>

<template>
    <div class="bg-white rounded-lg shadow overflow-hidden hover:shadow transition-all cursor-pointer"
        @click="showArticle(article)">
        <div v-if="article.head_images && article.head_images.length > 0" class="w-full h-32 bg-gray-200">
            <img :src="article.head_images[0]" class="mask-b-from-50%  w-full h-full object-cover brightness-50"
                :alt="article.title" />
        </div>
        <div class="p-4">
            <h3 class="text-lg break-all font-medium text-gray-800 line-clamp-2">
                {{ article.title }}
            </h3>

            <p v-if="article.description" class="text-gray-600 text-sm mb-2 line-clamp-2">
                {{ article.description }}
            </p>

            <div class="py-2 flex items-center gap-2">
                <span v-for="tag in article.tags" :key="tag"
                    class="px-1.5 py-0.5 text-xs bg-gray-100 text-gray-600 rounded">
                    <span class="mr-1">#</span>{{ tag }}
                </span>
            </div>

            <div class="flex items-center justify-between mt-auto text-sm">
                <div class="flex flex-wrap items-center gap-3">
                    <span class="flex items-center gap-1 text-gray-700">
                        <AiOutlineEye class="w-3.5 h-3.5" />
                        {{ article.views }}
                    </span>
                    <!-- <span class="flex items-center gap-1 text-gray-700">
                        <AiOutlineLike class="w-3.5 h-3.5" />
                        {{ article.likes }}
                    </span> -->
                </div>
                <div class="flex items-center gap-2 ml-4 flex-shrink-0 font-mono">
                    <span v-if="article.bought" class="px-2 py-0.5 text-xs bg-green-50 text-green-600 rounded">
                        已购买
                    </span>
                    <template v-else>
                        <span v-if="article.discount < 100" class="text-xs line-through text-gray-500">
                            ¥{{ (article.price / 100).toFixed(2) }}
                        </span>
                        <span class="text-xl text-orange-600">&yen;{{ discountPrice }}</span>
                    </template>
                </div>
            </div>
        </div>
    </div>
</template>
