<x-ui.card size="none" class="rounded-ui">
    <div class="flex items-center justify-between p-4 pb-4">
        <h4 class="text-lg font-semibold">Recent Activity</h4>
        <button class="btn btn-icon-sm btn-ghost btn-ghost-gray rounded-md">
            <x-ui.icon name="ph--dots-three-vertical" />
        </button>
    </div>
    <div class="px-6 pb-6 space-y-4">
        <div class="flex items-start space-x-3 p-3 rounded-lg hover:bg-muted/50 transition-colors">
            <div class="size-8 rounded-full overflow-hidden">
                <img src="/defaultavatar.webp" alt="Sarah Chen" class="w-full h-full object-cover" width="32"
                    height="32" loading="lazy" decoding="async" />
            </div>
            <div class="flex-1 space-y-1">
                <div class="flex items-center space-x-2">
                    <x-ui.icon name="ph--chat-dots" class="text-sm text-primary" />
                    <p class="text-sm">
                        <span class="font-medium text-foreground">Sarah Chen</span>
                        <span class="text-muted-foreground ml-1">commented on your post</span>
                    </p>
                </div>
                <p class="text-sm text-muted-foreground bg-muted p-2 rounded border-l-2 border-primary">
                    Great insights on the latest design trends! Really helpful
                    for our upcoming project.
                </p>
                <p class="text-xs text-muted-foreground">2 minutes ago</p>
            </div>
        </div>

        <div class="flex items-start space-x-3 p-3 rounded-lg hover:bg-muted/50 transition-colors">
            <div class="size-8 rounded-full overflow-hidden">
                <img src="/defaultavatar.webp" alt="Sarah Chen" class="w-full h-full object-cover" width="32"
                    height="32" loading="lazy" decoding="async" />
            </div>
            <div class="flex-1 space-y-1">
                <div class="flex items-center space-x-2">
                    <x-ui.icon name="ph--user" class="text-sm text-primary" />
                    <p class="text-sm">
                        <span class="font-medium text-foreground">Mike Johnson</span>
                        <span class="text-muted-foreground ml-1">liked your article</span>
                    </p>
                </div>
                <p class="text-sm text-muted-foreground bg-muted p-2 rounded border-l-2 border-primary">
                    Building Modern Dashboard Components
                </p>
                <p class="text-xs text-muted-foreground">15 minutes ago</p>
            </div>
        </div>

        <div class="flex items-start space-x-3 p-3 rounded-lg hover:bg-muted/50 transition-colors">
            <div class="size-8 rounded-full overflow-hidden">
                <img src="/defaultavatar.webp" alt="Sarah Chen" class="w-full h-full object-cover" width="32"
                    height="32" loading="lazy" decoding="async" />
            </div>
            <div class="flex-1 space-y-1">
                <div class="flex items-center space-x-2">
                    <x-ui.icon name="ph--share" class="text-sm text-primary" />
                    <p class="text-sm">
                        <span class="font-medium text-foreground">Emma Wilson</span>
                        <span class="text-muted-foreground ml-1">shared your post</span>
                    </p>
                </div>
                <p class="text-sm text-muted-foreground bg-muted p-2 rounded border-l-2 border-primary">
                    UI/UX Best Practices for 2024
                </p>
                <p class="text-xs text-muted-foreground">1 hour ago</p>
            </div>
        </div>
    </div>
</x-ui.card>

@php
    $products = [
        ['name' => 'Pro Plan Annual', 'revenue' => '$12,450', 'sales' => 43, 'trend' => 'up'],
        ['name' => 'Team Bundle', 'revenue' => '$8,910', 'sales' => 90, 'trend' => 'up'],
        ['name' => 'Pro Plan Monthly', 'revenue' => '$4,350', 'sales' => 150, 'trend' => 'up'],
        ['name' => 'Starter Plan', 'revenue' => '$2,160', 'sales' => 240, 'trend' => 'down'],
        ['name' => 'Enterprise Add-on', 'revenue' => '$1,800', 'sales' => 6, 'trend' => 'up'],
    ];
@endphp

<div class="w-full max-w-sm mx-auto px-4 py-10">
    <x-ui.card>
        <div class="flex items-center justify-between mb-4">
            <h3 class="text-sm font-semibold text-foreground">Top Products</h3>
            <x-ui.button size="xs" variant="outline">View All</x-ui.button>
        </div>
        <div class="divide-y divide-border-input">
            @foreach ($products as $product)
                <div class="flex items-center justify-between py-3 first:pt-0 last:pb-0">
                    <div class="flex-1 min-w-0">
                        <p class="text-sm font-medium text-foreground truncate">{{ $product['name'] }}</p>
                        <p class="text-xs text-muted-foreground">{{ $product['sales'] }} sales</p>
                    </div>
                    <div class="text-right ml-4">
                        <p class="text-sm font-semibold text-foreground">{{ $product['revenue'] }}</p>
                        <span class="inline-flex items-center text-xs {{ $product['trend'] === 'up' ? 'text-success' : 'text-destructive' }}">
                            <x-ui.icon name="{{ $product['trend'] === 'up' ? 'ph--trend-up' : 'ph--trend-down' }}" class="mr-0.5" />
                            {{ $product['trend'] === 'up' ? '+12%' : '-3%' }}
                        </span>
                    </div>
                </div>
            @endforeach
        </div>
    </x-ui.card>
</div>