{{--
    Heart toggle for one product. A real form, so it works without JS; the
    `wishlist` Stimulus controller turns the submit into a fetch and flips
    aria-pressed, which the CSS (group-aria-pressed) uses to swap the icons.

    Usage: <x-wishlist-button :product-id="$product['id']" class="absolute top-4 right-4" />
--}}
@props(['productId'])

@php
    $active = app(\App\Services\Wishlist::class)->has((int) $productId);
    $addLabel = __('storefront.wishlist.add');
    $removeLabel = __('storefront.wishlist.remove');
@endphp

<form
    method="POST"
    action="{{ route('wishlist.toggle', ['productId' => $productId]) }}"
    data-controller="wishlist"
    data-action="submit->wishlist#toggle"
    data-wishlist-add-label-value="{{ $addLabel }}"
    data-wishlist-remove-label-value="{{ $removeLabel }}"
    data-wishlist-added-message-value="{{ __('storefront.wishlist.added') }}"
    data-wishlist-removed-message-value="{{ __('storefront.wishlist.removed') }}"
    {{ $attributes }}
>
    @csrf

    <button
        type="submit"
        class="group/heart flex size-12 cursor-pointer items-center justify-center"
        aria-pressed="{{ $active ? 'true' : 'false' }}"
        aria-label="{{ $active ? $removeLabel : $addLabel }}"
        data-wishlist-target="button"
    >
        <x-ui.icon name="heart" :size="30" class="group-aria-pressed/heart:hidden" />
        <x-ui.icon name="heart-fill" :size="28" stroke="#000" class="hidden group-aria-pressed/heart:block text-brand" />
    </button>

    <span class="sr-only" role="status" aria-live="polite" data-wishlist-target="status"></span>
</form>