<div>
    <button wire:click="toggleLike" data-popover-target="popover-favorite" data-popover-placement="right" type="button" class="icon-btn h-10 w-10 <?php if ($product->isLikedBy(auth()->user())) echo "border-1 !border-red-600"; ?> " title="Product add to Favorite">
        <div class="i-lucide-heart size-6 <?php if ($product->isLikedBy(auth()->user())) echo "text-red-600"; ?>"></div>
    </button>

    <div data-popover="" id="popover-favorite" role="tooltip" class="invisible absolute z-10 inline-block rounded-lg border bg-background px-2 py-1 text-sm opacity-0 shadow-sm transition-opacity duration-300" data-popper-placement="right" data-popper-reference-hidden="" data-popper-escaped="" style="position: absolute; inset: 0px auto auto 0px; margin: 0px; transform: translate(397px, 262px);">
        <div class="px-3 py-2">
            <p>
                {{ __('add to favorite') }}
            </p>
        </div>
    </div>
</div>
