<template>
    <ULink :to="`/library/${item.id}`">
        <UCard :ui="cardUI">
            <div class="flex flex-col gap-1">
                <div>{{ item.name }}</div>
                <div class="flex">
                    <div class="flex items-center text-gray-500 text-sm gap-0.5">
                        <UIcon name="i-heroicons-square-3-stack-3d" />
                        <span>1</span>
                    </div>
                </div>
            </div>
        </UCard>
    </ULink>
</template>
<script setup>
defineProps({
    item: {
        type: Object,
        default: (() => {})()
    }
})
const cardUI = {
    body: {
        padding: 'sm:p-3 p-3',
        base: 'h-full'
    },
    background: 'transition bg-gray-50 hover:bg-gray-100 dark:hover:bg-gray-800'
}
</script>