<script setup>
/**
 * CardSkeleton — kart/widget placeholder
 */
defineProps({
    showAvatar: { type: Boolean, default: false },
    lines: { type: Number, default: 3 },
})
</script>

<template>
    <div class="animate-pulse rounded-xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900 p-5">
        <div class="flex items-center gap-3 mb-4">
            <div v-if="showAvatar" class="h-10 w-10 rounded-full bg-slate-200 dark:bg-slate-700" />
            <div class="flex-1 space-y-2">
                <div class="h-4 w-1/3 rounded bg-slate-200 dark:bg-slate-700" />
                <div class="h-3 w-1/2 rounded bg-slate-200 dark:bg-slate-700" />
            </div>
        </div>
        <div class="space-y-2">
            <div
                v-for="i in lines"
                :key="i"
                class="h-3 rounded bg-slate-200 dark:bg-slate-700"
                :style="{ width: i === lines ? '60%' : '100%' }"
            />
        </div>
    </div>
</template>
