@props(['title', 'count', 'route', 'icon', 'description' => ''])

<a href="{{ $route }}" class="category-card" data-reveal>
    <div class="category-card-icon">
        {!! $icon !!}
    </div>
    <div class="category-card-body">
        <h3 class="category-card-title">{{ $title }}</h3>
        <p class="category-card-count">{{ $count }} Products</p>
        @if($description)
            <p class="category-card-desc">{{ $description }}</p>
        @endif
    </div>
    <div class="category-card-arrow">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
    </div>
</a>