<template>
    <ULink to="/search/123" class="flex flex-col group">
        <div class="transition truncate group-hover:text-primary">{{ item.title }}</div>
        <div class="break-word text-balance line-clamp-2 font-sans text-base" :class="textColor">
           {{ item.description || ' 待补充' }}
        </div>
    </ULink>
    <div class="flex justify-between items-center">
        <div class="flex gap-4">
            <div class="flex items-center text-sm gap-0.5" :class="textColor">
                <UIcon name="i-heroicons-eye" />
                <span>1</span>
            </div>
            <div class="flex items-center text-sm gap-0.5" :class="textColor">
                <UIcon name="i-heroicons-clock" />
                <span>52 分钟前</span>
            </div>
        </div>
        <div class="flex gap-4">
            <UButton
                :ui="{ rounded: 'rounded-full' }"
                to="/library/123"
                color="white"
                size="2xs"
                label="前端开发"
            />
            <UTooltip text="添加到收藏">
                <UButton
                    color="gray"
                    variant="ghost"
                    size="2xs"
                    icon="i-heroicons-plus"
                    @click="handleOpenSelect"
                />
            </UTooltip>
            <IActionThread />
        </div>
    </div>
    <UDivider />
</template>
<script setup>
const { $openLibrarySelect } = useLibraryStore()
const textColor = 'text-gray-500 dark:text-gray-400'
const props = defineProps({
    item: {
        type: Object,
        default: (() => {})()
    }
})
function handleOpenSelect (id) {
    $openLibrarySelect(id)
}
</script>