@props(['links' => []])

@php
    $paths = [
        'instagram' => 'M12 2.2c3.2 0 3.6 0 4.9.07 1.2.05 1.8.25 2.2.42.6.23 1 .5 1.4 1 .5.4.8.8 1 1.4.2.4.4 1 .4 2.2.1 1.3.1 1.7.1 4.9s0 3.6-.1 4.9c0 1.2-.2 1.8-.4 2.2a3.9 3.9 0 0 1-1 1.4c-.4.5-.8.8-1.4 1-.4.2-1 .4-2.2.4-1.3.1-1.7.1-4.9.1s-3.6 0-4.9-.1c-1.2 0-1.8-.2-2.2-.4a3.9 3.9 0 0 1-1.4-1 3.9 3.9 0 0 1-1-1.4c-.2-.4-.4-1-.4-2.2C2.2 15.6 2.2 15.2 2.2 12s0-3.6.1-4.9c0-1.2.2-1.8.4-2.2a3.9 3.9 0 0 1 1-1.4c.4-.5.8-.8 1.4-1 .4-.2 1-.4 2.2-.4C8.4 2.2 8.8 2.2 12 2.2Zm0 1.8c-3.1 0-3.5 0-4.7.07-1 .04-1.5.2-1.9.35-.4.15-.7.34-1 .63-.3.3-.5.6-.6 1-.2.4-.3.9-.4 1.9C3.3 9.1 3.3 9.5 3.3 12s0 2.9.1 4.1c0 1 .2 1.5.4 1.9.1.4.3.7.6 1 .3.3.6.5 1 .6.4.2.9.3 1.9.4 1.2.06 1.6.07 4.7.07s3.5 0 4.7-.07c1 0 1.5-.2 1.9-.4.4-.1.7-.3 1-.6.3-.3.5-.6.6-1 .2-.4.3-.9.4-1.9.06-1.2.07-1.6.07-4.1s0-2.9-.07-4.1c0-1-.2-1.5-.4-1.9a2.6 2.6 0 0 0-.6-1c-.3-.3-.6-.5-1-.6-.4-.2-.9-.3-1.9-.4C15.5 4 15.1 4 12 4Zm0 3.1a4.9 4.9 0 1 1 0 9.8 4.9 4.9 0 0 1 0-9.8Zm0 1.8a3.1 3.1 0 1 0 0 6.2 3.1 3.1 0 0 0 0-6.2Zm5.1-2.2a1.15 1.15 0 1 1 0 2.3 1.15 1.15 0 0 1 0-2.3Z',
        'facebook' => 'M13.5 21v-8h2.7l.4-3.1h-3.1V7.9c0-.9.25-1.5 1.55-1.5h1.65V3.6c-.3 0-1.3-.1-2.45-.1-2.4 0-4.05 1.5-4.05 4.2v2.2H7.4V13h2.3v8h3.8Z',
        'tiktok' => 'M16.6 2h-3v13.1a2.5 2.5 0 1 1-2.5-2.5c.26 0 .5.04.74.11V9.6a5.6 5.6 0 1 0 4.76 5.5V8.5a5.6 5.6 0 0 0 3.4 1.15V6.6a2.8 2.8 0 0 1-2.7-2.8V2Z',
        'pinterest' => 'M12 2a10 10 0 0 0-3.65 19.3c-.05-.75-.01-1.65.18-2.47.2-.87 1.35-5.7 1.35-5.7s-.34-.67-.34-1.66c0-1.55.9-2.71 2.02-2.71.95 0 1.41.71 1.41 1.57 0 .95-.61 2.38-.92 3.7-.27 1.11.55 2.02 1.65 2.02 1.98 0 3.5-2.09 3.5-5.1 0-2.67-1.92-4.53-4.66-4.53-3.17 0-5.03 2.38-5.03 4.83 0 .96.37 1.99.83 2.55.09.11.1.21.08.32-.08.35-.28 1.11-.32 1.27-.05.21-.17.26-.39.16-1.46-.68-2.37-2.81-2.37-4.53 0-3.68 2.68-7.07 7.72-7.07 4.05 0 7.2 2.89 7.2 6.75 0 4.03-2.54 7.28-6.07 7.28-1.19 0-2.3-.62-2.68-1.35 0 0-.59 2.34-.73 2.91-.24.94-.9 2.11-1.34 2.83A10 10 0 1 0 12 2Z',
    ];
@endphp

<ul {{ $attributes->merge(['class' => 'flex flex-wrap items-center gap-1 -ml-2']) }}>
    @foreach ($links as $link)
        <li>
            <a
                href="{{ $link['url'] }}"
                target="_blank"
                rel="noopener"
                class="inline-flex size-9 items-center justify-center text-ink-subtle transition-colors hover:text-accent"
            >
                <span class="sr-only">{{ $link['label'] }}</span>
                <svg class="size-5" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
                    <path d="{{ $paths[$link['icon']] ?? '' }}"/>
                </svg>
            </a>
        </li>
    @endforeach
</ul>