@props([
    'tools' => [],
    'cardClass' => 'tool-card',
    'nameClass' => 'tool-card-name',
    'metaClass' => 'tool-card-meta',
    'tagClass' => 'tool-card-tag',
])

<div class="tool-grid">
    @foreach($tools as $tool)
        <a class="{{ $cardClass }}" href="{{ route('tools.show', $tool->slug) }}">
            @if($tool->logo_url)
            <div class="tool-card-icon">
                <img src="{{ $tool->logo_url }}" alt="{{ $tool->name }}" loading="lazy">
            </div>
            @endif
            <div class="{{ $nameClass }}">{{ $tool->name }}</div>
            <div class="{{ $metaClass }}">{{ $tool->category?->name ?? '未分类' }} · {{ $tool->pricing_type }}</div>
            @if($tool->summary)
            <p class="tool-card-desc">{{ $tool->summary }}</p>
            @endif
            <div class="tool-card-footer">
                <span class="{{ $tagClass }}">{{ $tool->has_api ? '支持 API' : '无 API' }}</span>
                <span class="tool-card-date">{{ $tool->published_at?->format('Y-m-d') }}</span>
            </div>
        </a>
    @endforeach
</div>