@php
    $socialLinks = $socialLinks ?? \App\Models\Setting::socialLinks();
    $variant = $variant ?? 'default';
@endphp

@if (count($socialLinks) > 0)
    <div class="social-links social-links-{{ $variant }}" aria-label="Sosial media">
        @foreach ($socialLinks as $social)
            <a
                href="{{ $social['url'] }}"
                target="_blank"
                rel="noopener"
                class="social-link social-{{ $social['name'] }}"
                title="{{ $social['label'] }} {{ $social['handle'] }}"
                aria-label="{{ $social['label'] }} {{ $social['handle'] }}"
            >
                <span class="social-icon" aria-hidden="true">
                    @if ($social['name'] === 'instagram')
                        <svg viewBox="0 0 24 24"><defs><linearGradient id="ig" x1="0%" y1="100%" x2="100%" y2="0%"><stop offset="0%" stop-color="#f58529"/><stop offset="50%" stop-color="#dd2a7b"/><stop offset="100%" stop-color="#8134af"/></linearGradient></defs><rect x="3" y="3" width="18" height="18" rx="5" fill="none" stroke="url(#ig)" stroke-width="1.8"/><circle cx="12" cy="12" r="4" fill="none" stroke="url(#ig)" stroke-width="1.8"/><circle cx="17.5" cy="6.5" r="1.2" fill="url(#ig)"/></svg>
                    @elseif ($social['name'] === 'tiktok')
                        <svg viewBox="0 0 24 24">
                            <path fill="#25F4EE" d="M16.6 5.82A4.8 4.8 0 0 0 19.6 2h-2.9a4.82 4.82 0 0 1-3.7 3.8v10.9a4.1 4.1 0 1 1-4.1-4.1c.2 0 .4 0 .6.05V9.7a7 7 0 1 0 6.5 7V7.2a7.9 7.9 0 0 0 4.5 1.4V6.2a4.9 4.9 0 0 1-3.9-.38Z" transform="translate(.7 .7)"/>
                            <path fill="#FE2C55" d="M16.6 5.82A4.8 4.8 0 0 0 19.6 2h-2.9a4.82 4.82 0 0 1-3.7 3.8v10.9a4.1 4.1 0 1 1-4.1-4.1c.2 0 .4 0 .6.05V9.7a7 7 0 1 0 6.5 7V7.2a7.9 7.9 0 0 0 4.5 1.4V6.2a4.9 4.9 0 0 1-3.9-.38Z" transform="translate(-.7 -.7)"/>
                            <path fill="#fff" d="M16.6 5.82A4.8 4.8 0 0 0 19.6 2h-2.9a4.82 4.82 0 0 1-3.7 3.8v10.9a4.1 4.1 0 1 1-4.1-4.1c.2 0 .4 0 .6.05V9.7a7 7 0 1 0 6.5 7V7.2a7.9 7.9 0 0 0 4.5 1.4V6.2a4.9 4.9 0 0 1-3.9-.38Z"/>
                        </svg>
                    @else
                        <svg viewBox="0 0 24 24"><path fill="#1877F2" d="M14 13.5h2.5l1-4H14v-2c0-1.03 0-2 2-2h1.5V2.14C17.26 2.1 16.1 2 14.79 2 11.7 2 9.5 3.88 9.5 7.16V9.5H7v4h2.5V22h4v-8.5Z"/></svg>
                    @endif
                </span>
                <span class="social-handle">{{ $social['handle'] }}</span>
            </a>
        @endforeach
    </div>
@endif