@props(['pro'])
<a href="{{ url('/professionnel/'.$pro['ref'].'-'.$pro['slug']) }}" class="card card-hover pro-card card-pad" style="display:block">
    <div class="pro-head">
        <span class="pro-logo"><x-icon :name="$pro['icon']"/></span>
        <span style="min-width:0;flex:1">
            <span class="row-center" style="gap:6px;flex-wrap:wrap">
                <strong style="color:var(--ink-900)">{{ $pro['title'] }}</strong>
                @if($pro['verified'])<x-icon name="check-circle" style="width:15px;height:15px;color:var(--green)"/>@endif
            </span>
            <span class="fiche-cat" style="display:block;margin-top:2px">{{ $pro['category']['name'] }}</span>
        </span>
        @if($pro['premium'])<span class="badge badge-gold"><x-icon name="star"/> Premium</span>@endif
    </div>

    <div class="row-center" style="margin-top:12px;gap:8px;flex-wrap:wrap">
        <span class="stars">
            @for($i = 1; $i <= 5; $i++)
                <x-icon name="star" :fill="$i <= round($pro['rating'])" style="{{ $i <= round($pro['rating']) ? '' : 'color:var(--line)' }}"/>
            @endfor
        </span>
        <span class="rating-value">{{ number_format($pro['rating'], 1, ',', '') }}</span>
        <span class="small muted">({{ $pro['reviews'] }} avis)</span>
    </div>

    <p class="small muted clamp-2" style="margin:10px 0 12px">{{ Str::limit($pro['description'], 120) }}</p>

    <div class="fiche-foot" style="border-top:1px solid var(--line-soft);padding-top:10px">
        <span class="row-center"><x-icon name="pin" style="width:14px;height:14px"/> {{ $pro['localisation'] }}</span>
        <span class="badge {{ $pro['ouvert'] ? 'badge-green' : '' }}">{{ $pro['ouvert'] ? 'Ouvert' : 'Fermé' }}</span>
    </div>
</a>