@props([
    'store' => null,
    'categories' => [],
    'totalProducts' => 0,
    'is_logged_in' => false
])

<div class="seller-profile-section card mb-4 shadow-sm border-0">
    <div class="card-body d-flex flex-column flex-md-row align-items-center gap-4">
        <!-- Store Image -->
        <div class="store-image">
            <img src="{{ $store['image'] ?? 'https://via.placeholder.com/100' }}"
                 alt="{{ $store['name'] ?? 'Store Name' }}"
                 class="rounded-circle img-thumbnail"
                 style="width: 100px; height: 100px; object-fit: cover;">
        </div>

        <!-- Store Info -->
        <div class="store-info flex-grow-1">
            <h4 class="mb-1">{{ $store['name'] ?? 'Awesome Store' }}</h4>

            <p class="mb-1 text-muted">
                {{ $store['description'] ?? 'We provide high-quality tech gadgets and accessories at unbeatable prices.' }}
            </p>

            <div class="store-meta d-flex flex-wrap gap-3 mt-2">
                @if(!empty($store['location']))
                    <div><i class="bi bi-geo-alt"></i> {{ $store['location'] }}</div>
                @endif
                @if(!empty($store['email']))
                    <div><i class="bi bi-envelope"></i> {{ $store['email'] }}</div>
                @endif
                @if(!empty($store['phone']))
                    <div><i class="bi bi-telephone"></i> {{ $store['phone'] }}</div>
                @endif

                <div><i class="bi bi-box-seam"></i> {{ $totalProducts }} Products</div>
                <div><i class="bi bi-tags"></i> {{ count($categories) }} Categories</div>
            </div>

            <!-- Categories List -->
            @if(!empty($categories))
                <div class="mt-3">
                    <strong>Categories:</strong>
                    @foreach($categories as $category)
                        <span class="badge bg-light text-dark border me-1">{{ $category }}</span>
                    @endforeach
                </div>
            @endif
        </div>

        <!-- Chat Button -->
        <div class="text-md-end">
            @if($is_logged_in)
                <button class="btn btn-outline-primary"
                        onclick="startChatWithSeller({{ $store['id'] ?? 0 }})">
                    <i class="bi bi-chat-dots me-1"></i> Chat with Seller
                </button>
            @else
                <button class="btn btn-outline-primary"
                        onclick="window.location.href='{{ customUrl('login') }}'">
                    <i class="bi bi-chat-dots me-1"></i> {{ labels('front_messages.sign_in_for_chat', 'Sign In for Chat') }}
                </button>
            @endif
        </div>
    </div>
</div>

@once
    <script>
        function startChatWithSeller(id) {
            alert("Chat with seller ID: " + id); // Replace with actual chat logic
        }
    </script>
@endonce