@props(['url' => null, 'title' => ''])
@php $u = urlencode($url ?? request()->fullUrl()); $t = urlencode($title); @endphp

<div class="flex items-center gap-2" x-data="{ copied: false }">
    <span class="text-small text-muted mr-1">Bagikan:</span>
    <a href="https://wa.me/?text={{ $t }}%20{{ $u }}" target="_blank" rel="noopener" aria-label="WhatsApp"
       class="grid h-9 w-9 place-items-center rounded-full bg-ink/5 text-muted hover:bg-primary/10 hover:text-primary"><x-brand-icon name="whatsapp" class="w-5 h-5"/></a>
    <a href="https://www.facebook.com/sharer/sharer.php?u={{ $u }}" target="_blank" rel="noopener" aria-label="Facebook"
       class="grid h-9 w-9 place-items-center rounded-full bg-ink/5 text-muted hover:bg-primary/10 hover:text-primary"><x-brand-icon name="facebook" class="w-5 h-5"/></a>
    <a href="https://twitter.com/intent/tweet?url={{ $u }}&text={{ $t }}" target="_blank" rel="noopener" aria-label="X"
       class="grid h-9 w-9 place-items-center rounded-full bg-ink/5 text-muted hover:bg-primary/10 hover:text-primary"><x-brand-icon name="x" class="w-4 h-4"/></a>
    <button type="button" @click="navigator.clipboard.writeText('{{ $url ?? request()->fullUrl() }}'); copied=true; setTimeout(()=>copied=false,1500)"
       class="grid h-9 w-9 place-items-center rounded-full bg-ink/5 text-muted hover:bg-primary/10 hover:text-primary" aria-label="Salin tautan">
        <x-brand-icon name="link" class="w-5 h-5"/>
    </button>
    <span x-show="copied" x-cloak class="text-caption text-primary">Tersalin!</span>
</div>