@props(['url' => null, 'title' => null, 'description' => null, 'image' => null])

@php
$shareUrl = $url ?? url()->current();
$shareTitle = $title ?? config('app.name');
$shareDescription = $description ?? '';
$shareImage = $image ?? asset('images/logo.png');

$encodedUrl = urlencode($shareUrl);
$encodedTitle = urlencode($shareTitle);
$encodedDescription = urlencode($shareDescription);
@endphp

<div class="share-buttons">
    <span class="share-label">শেয়ার করুন:</span>
    <div class="share-icons">
        <a href="https://www.facebook.com/sharer/sharer.php?u={{ $encodedUrl }}" 
           target="_blank" 
           class="share-btn share-facebook"
           title="Facebook এ শেয়ার করুন">
            <i class="fab fa-facebook-f"></i>
        </a>
        
        <a href="https://twitter.com/intent/tweet?url={{ $encodedUrl }}&text={{ $encodedTitle }}" 
           target="_blank" 
           class="share-btn share-twitter"
           title="Twitter এ শেয়ার করুন">
            <i class="fab fa-twitter"></i>
        </a>
        
        <a href="https://www.linkedin.com/shareArticle?mini=true&url={{ $encodedUrl }}&title={{ $encodedTitle }}&summary={{ $encodedDescription }}" 
           target="_blank" 
           class="share-btn share-linkedin"
           title="LinkedIn এ শেয়ার করুন">
            <i class="fab fa-linkedin-in"></i>
        </a>
        
        <a href="https://wa.me/?text={{ $encodedTitle }}%20{{ $encodedUrl }}" 
           target="_blank" 
           class="share-btn share-whatsapp"
           title="WhatsApp এ শেয়ার করুন">
            <i class="fab fa-whatsapp"></i>
        </a>
        
        <a href="mailto:?subject={{ $encodedTitle }}&body={{ $encodedDescription }}%20{{ $encodedUrl }}" 
           class="share-btn share-email"
           title="Email এ পাঠান">
            <i class="fas fa-envelope"></i>
        </a>
        
        <button class="share-btn share-copy" 
                data-url="{{ $shareUrl }}"
                title="লিংক কপি করুন">
            <i class="fas fa-link"></i>
        </button>
    </div>
</div>

@push('styles')
<style>
.share-buttons {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.share-label {
    font-weight: 600;
    color: #333;
}

.share-icons {
    display: flex;
    gap: 8px;
}

.share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: white;
    text-decoration: none;
    transition: transform 0.2s, opacity 0.2s;
    border: none;
    cursor: pointer;
}

.share-btn:hover {
    transform: scale(1.1);
    opacity: 0.9;
    color: white;
}

.share-facebook { background: #1877f2; }
.share-twitter { background: #1da1f2; }
.share-linkedin { background: #0077b5; }
.share-whatsapp { background: #25d366; }
.share-email { background: #ea4335; }
.share-copy { background: #666; }

.share-copy.copied {
    background: #25d366;
}
</style>
@endpush

@push('scripts')
<script>
document.querySelectorAll('.share-copy').forEach(btn => {
    btn.addEventListener('click', function() {
        const url = this.dataset.url;
        navigator.clipboard.writeText(url).then(() => {
            this.classList.add('copied');
            this.innerHTML = '<i class="fas fa-check"></i>';
            setTimeout(() => {
                this.classList.remove('copied');
                this.innerHTML = '<i class="fas fa-link"></i>';
            }, 2000);
        });
    });
});
</script>
@endpush