@props(['hasLocation' => false, 'label' => null, 'pin' => null])
<div class="loc-card" data-bfk-loc-status="{{ $hasLocation ? 'captured' : 'missing' }}">
    <div class="loc-ic">
        <x-icon name="location" :size="22" />
    </div>
    <div class="loc-body">
        @if($hasLocation)
            <strong data-bfk-loc-label>{{ $label ?? 'Location saved' }}</strong>
            <span class="muted" style="font-size: 11.5px;">
                <x-icon name="check" :size="11" /> Captured
                <span data-bfk-loc-pin style="margin-left: 6px;">{{ $pin ?? '' }}</span>
            </span>
        @else
            <strong data-bfk-loc-label>Set your location</strong>
            <span class="muted" style="font-size: 11.5px;">We use it to match you with nearby partners.</span>
        @endif
    </div>
    <button type="button" class="loc-btn" data-bfk-detect-location data-set-default="1">
        <x-icon name="location" :size="14" />
        <span>{{ $hasLocation ? 'Update' : 'Use my location' }}</span>
    </button>
</div>
