{{-- 
    Skeleton loading component for elderly cards
    This provides a better user experience while data is loading
--}}

<div class="border rounded-lg overflow-hidden">
    <div class="aspect-[4/3] bg-muted animate-pulse"></div>
    <div class="p-4 space-y-3">
        <div class="h-6 bg-muted rounded-md animate-pulse w-3/4"></div>
        <div class="h-4 bg-muted rounded-md animate-pulse w-1/2"></div>
        <div class="space-y-2">
            <div class="h-4 bg-muted rounded-md animate-pulse"></div>
            <div class="h-4 bg-muted rounded-md animate-pulse w-5/6"></div>
        </div>
        <div class="h-2 bg-muted rounded-md animate-pulse"></div>
        <div class="flex gap-2 pt-2">
            <div class="h-10 bg-muted rounded-full animate-pulse w-1/2"></div>
            <div class="h-10 bg-muted rounded-full animate-pulse w-1/2"></div>
        </div>
    </div>
</div>