@props(['system_category', 'image', 'href' => '#'])

<a href="{{ $href }}">
    <div class="bg-white overflow-hidden shadow-xl sm:rounded-lg">
        <div class="max-w-sm mx-auto bg-white rounded-lg shadow-lg overflow-hidden flex items-center justify-center p-4 hover:shadow-xl transition-shadow duration-300">
            
            <!-- Logo -->
            <div class="shrink-0 flex items-center justify-center">
                @if ($image)
                    <img src="{{ asset('images/products/' . $image) }}" alt="{{ $image }} 示意圖" class="w-16 h-16">
                @endif
            </div>

            <!-- 廠商名稱 -->
            <div>
                <h3 class="text-lg font-semibold text-gray-900">{{ $system_category }}</h3>
            </div>
        </div>
    </div>
</a>