@using Microsoft.AspNetCore.Components

<li class="hover:bg-gray-50 dark:hover:bg-gray-600 transition duration-150 ease-in-out">
    <div class="p-4 flex justify-start items-start">
        <div class="mr-4 flex-shrink-0">
            <SkeletonBase Height="40" AdditionalClasses="rounded-full w-10">
                <div class="w-full h-full rounded-full bg-gray-300 dark:bg-gray-700"></div>
            </SkeletonBase>
        </div>
        <div class="flex-grow min-w-0">
            <div class="flex items-start justify-between">
                <div class="flex-grow min-w-0 mr-2">
                    <!-- From Name (top, prominent) -->
                    <div class="mb-1">
                        <SkeletonBase Height="18" AdditionalClasses="w-40">
                            <div class="w-full h-full bg-gray-300 dark:bg-gray-700 rounded"></div>
                        </SkeletonBase>
                    </div>
                    <!-- Subject (smaller, below from) -->
                    <div class="mb-1">
                        <SkeletonBase Height="16" AdditionalClasses="w-48">
                            <div class="w-full h-full bg-gray-300 dark:bg-gray-700 rounded"></div>
                        </SkeletonBase>
                    </div>
                    <!-- Message Preview (single line) -->
                    <div>
                        <SkeletonBase Height="12" AdditionalClasses="w-64">
                            <div class="w-full h-full bg-gray-300 dark:bg-gray-700 rounded"></div>
                        </SkeletonBase>
                    </div>
                </div>
                <!-- Date (compact format) -->
                <div class="flex-shrink-0">
                    <SkeletonBase Height="12" AdditionalClasses="w-10">
                        <div class="w-full h-full bg-gray-300 dark:bg-gray-700 rounded"></div>
                    </SkeletonBase>
                </div>
            </div>
        </div>
    </div>
</li>