<template>
    <div :class="['space-y-4', className]">
        <!-- Header skeleton if needed -->
        <div v-if="showHeader" class="flex items-center justify-between">
            <Skeleton variant="text" size="lg" width="200px" />
            <Skeleton variant="button" size="md" />
        </div>

        <!-- Search/Filter skeleton if needed -->
        <div v-if="showSearch" class="flex gap-3">
            <Skeleton variant="rectangular" height="40px" class="flex-1" />
            <Skeleton variant="button" size="md" />
        </div>

        <!-- List items -->
        <div class="space-y-3">
            <div v-for="i in itemCount" :key="i" :class="[
                'flex items-center gap-4 p-4 rounded-lg border',
                'bg-white dark:bg-stone-900 border-stone-200 dark:border-stone-800'
            ]">
                <!-- Avatar/Icon -->
                <Skeleton v-if="showAvatar" :variant="avatarShape" size="md" />

                <!-- Content -->
                <div class="flex-1 space-y-2">
                    <!-- Title -->
                    <Skeleton variant="text" size="md" :width="titleWidths[i % titleWidths.length]" />

                    <!-- Subtitle/Description -->
                    <Skeleton v-if="showSubtitle" variant="text" size="sm"
                        :width="subtitleWidths[i % subtitleWidths.length]" />

                    <!-- Meta info -->
                    <div v-if="showMeta" class="flex gap-4">
                        <Skeleton variant="text" size="sm" width="60px" />
                        <Skeleton variant="text" size="sm" width="80px" />
                    </div>
                </div>

                <!-- Actions -->
                <div v-if="showActions" class="flex gap-2">
                    <Skeleton variant="circular" size="sm" />
                    <Skeleton variant="circular" size="sm" />
                </div>

                <!-- Status indicator -->
                <Skeleton v-if="showStatus" variant="circular" size="sm" />
            </div>
        </div>

        <!-- Pagination skeleton if needed -->
        <div v-if="showPagination" class="flex justify-center gap-2">
            <Skeleton variant="button" size="sm" v-for="i in 5" :key="i" />
        </div>
    </div>
</template>

<script setup lang="ts">
import Skeleton from './Skeleton.vue';

export interface SkeletonListProps {
    itemCount?: number;
    showHeader?: boolean;
    showSearch?: boolean;
    showAvatar?: boolean;
    avatarShape?: 'circular' | 'rectangular';
    showSubtitle?: boolean;
    showMeta?: boolean;
    showActions?: boolean;
    showStatus?: boolean;
    showPagination?: boolean;
    className?: string;
}

const props = withDefaults(defineProps<SkeletonListProps>(), {
    itemCount: 5,
    showHeader: true,
    showSearch: false,
    showAvatar: true,
    avatarShape: 'circular',
    showSubtitle: true,
    showMeta: false,
    showActions: true,
    showStatus: false,
    showPagination: false,
    className: ''
});

// Varied widths for more realistic loading appearance
const titleWidths = ['75%', '60%', '85%', '70%', '90%'];
const subtitleWidths = ['45%', '55%', '40%', '65%', '50%'];
</script>