@props([
    'url',
    'title',
])

{{--
    Social sharing (PRD 10.16) — Facebook, LinkedIn, X, WhatsApp, Copy Link.

    Plain share-intent links, not the platforms' official SDK widgets: an
    embedded Facebook/X button loads third-party JavaScript that tracks every
    reader of the page whether or not they click it, and adds render-blocking
    requests that would undo the performance targets in PRD 13.13. These links
    send nothing anywhere until the visitor actually chooses to share.
--}}
@php
    $encodedUrl = rawurlencode($url);
    $encodedTitle = rawurlencode($title);

    $targets = [
        [
            'label' => 'Share on Facebook',
            'icon' => 'fa-brands fa-facebook-f',
            'href' => "https://www.facebook.com/sharer/sharer.php?u={$encodedUrl}",
        ],
        [
            'label' => 'Share on LinkedIn',
            'icon' => 'fa-brands fa-linkedin-in',
            'href' => "https://www.linkedin.com/sharing/share-offsite/?url={$encodedUrl}",
        ],
        [
            'label' => 'Share on X',
            'icon' => 'fa-brands fa-x-twitter',
            'href' => "https://twitter.com/intent/tweet?url={$encodedUrl}&text={$encodedTitle}",
        ],
        [
            'label' => 'Share on WhatsApp',
            'icon' => 'fa-brands fa-whatsapp',
            'href' => "https://api.whatsapp.com/send?text={$encodedTitle}%20{$encodedUrl}",
        ],
    ];
@endphp

<div {{ $attributes->merge(['class' => 'd-flex flex-wrap align-items-center gap-2']) }}>
    <span class="me-1" style="font-size: var(--fs-small); color: var(--color-paragraph);">Share</span>

    @foreach($targets as $target)
        <a
            href="{{ $target['href'] }}"
            target="_blank"
            rel="noopener noreferrer"
            class="share-button"
            aria-label="{{ $target['label'] }}"
            title="{{ $target['label'] }}"
        >
            <i class="{{ $target['icon'] }}" aria-hidden="true"></i>
        </a>
    @endforeach

    <button
        type="button"
        class="share-button"
        data-copy-link="{{ $url }}"
        aria-label="Copy link to this article"
        title="Copy link"
    >
        <i class="fa-solid fa-link" aria-hidden="true"></i>
    </button>

    {{-- Feedback for the copy button. aria-live so the confirmation is
         announced rather than only shown. --}}
    <span data-copy-feedback role="status" aria-live="polite" class="small" style="color: var(--color-primary);"></span>
</div>