{{--
    ================================================================
    Wishlist Button Component — x-wishlist-btn
    ================================================================
    Props:
    • courseId    (int)  — required
    • isActive    (bool) — initial wishlist state
    • size        (string) — 'sm' | 'md' | 'full' (default: 'md')

    Variants:
    • 'sm' / 'md'  — floating icon on card top bar (white background)
    • 'full'       — full-width labeled button (course show sidebar)
    ================================================================
--}}

@props([
    'courseId',
    'isActive' => false,
    'size'     => 'md',
])

@php
    $btnId  = "wl-btn-{$courseId}";
    $iconId = "wl-icon-{$courseId}";
    $textId = "wl-text-{$courseId}";
@endphp

@if($size === 'full')
{{-- ── Full-width button (course show sidebar) ── --}}
<button
    type="button"
    id="{{ $btnId }}"
    data-course-id="{{ $courseId }}"
    data-active="{{ $isActive ? 'true' : 'false' }}"
    onclick="EbdaWishlist.toggle({{ $courseId }})"
    class="wishlist-btn w-full px-5 py-3 rounded-xl border-2 flex items-center justify-center gap-2 font-bold text-sm transition-all duration-300
           {{ $isActive
               ? 'wishlist-btn--active border-red-200 bg-red-50 text-red-600 hover:bg-red-100'
               : 'border-gray-200 bg-white text-gray-500 hover:border-red-200 hover:bg-red-50 hover:text-red-500'
           }}"
    aria-label="{{ $isActive ? 'إزالة من المفضلة' : 'إضافة إلى المفضلة' }}">

    <svg id="{{ $iconId }}"
         class="w-5 h-5 transition-all duration-300 {{ $isActive ? 'text-red-500' : 'text-current' }}"
         fill="{{ $isActive ? 'currentColor' : 'none' }}"
         stroke="currentColor"
         stroke-width="2"
         viewBox="0 0 24 24"
         aria-hidden="true">
        <path stroke-linecap="round" stroke-linejoin="round"
              d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"/>
    </svg>

    <span id="{{ $textId }}" class="font-bold">
        {{ $isActive ? 'إزالة من المفضلة' : 'إضافة إلى المفضلة' }}
    </span>
</button>

@else
{{-- ── Compact icon button (floating on card — white background) ── --}}
<button
    type="button"
    id="{{ $btnId }}"
    data-course-id="{{ $courseId }}"
    data-active="{{ $isActive ? 'true' : 'false' }}"
    onclick="EbdaWishlist.toggle({{ $courseId }})"
    class="wishlist-btn group/wl
           {{ $size === 'sm' ? 'w-7 h-7' : 'w-9 h-9' }}
           flex items-center justify-center
           rounded-full
           border transition-all duration-300 cursor-pointer outline-none
           {{ $isActive
               ? 'wishlist-btn--active bg-red-50 border-red-200 shadow-sm'
               : 'bg-white border-gray-200 hover:bg-red-50 hover:border-red-200 shadow-sm'
           }}"
    aria-label="{{ $isActive ? 'إزالة من المفضلة' : 'إضافة إلى المفضلة' }}">

    <svg id="{{ $iconId }}"
         class="transition-all duration-300
                {{ $size === 'sm' ? 'w-3.5 h-3.5' : 'w-4.5 h-4.5' }}
                {{ $isActive ? 'text-red-500' : 'text-gray-400 group-hover/wl:text-red-400' }}"
         style="{{ $size === 'sm' ? 'width:14px;height:14px' : 'width:18px;height:18px' }}"
         fill="{{ $isActive ? 'currentColor' : 'none' }}"
         stroke="currentColor"
         stroke-width="2"
         viewBox="0 0 24 24"
         aria-hidden="true">
        <path stroke-linecap="round" stroke-linejoin="round"
              d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"/>
    </svg>
</button>
@endif