@props(['product'])

@php
    $isBookmarked = auth()->check() && $product->isBookmarkedBy(auth()->user());
@endphp

<div x-data="{
    bookmarked: {{ $isBookmarked ? 'true' : 'false' }},
    loading: false,
    toggleBookmark() {
        if (this.loading) return;
        this.loading = true;

        fetch('{{ route('products.bookmark', $product) }}', {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Content-Type': 'application/json',
                'Accept': 'application/json',
            },
        })
        .then(response => response.json())
        .then(data => {
            this.bookmarked = data.bookmarked;
        })
        .catch(error => {
            console.error('Error:', error);
        })
        .finally(() => {
            this.loading = false;
        });
    }
}">
    <button @click="toggleBookmark()"
            :disabled="loading"
            :title="bookmarked ? 'Remove bookmark' : 'Bookmark this product'"
            class="text-gray-400 hover:text-primary-600 transition-colors disabled:opacity-50">
        <svg class="h-5 w-5"
             :class="{ 'animate-pulse': loading }"
             :fill="bookmarked ? 'currentColor' : 'none'"
             stroke="currentColor"
             viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z"></path>
        </svg>
    </button>
</div>