{{--
    Partial: add-to-cart
    Props: $productId, $fullWidth
    fullWidth=false → tombol bulat kecil (product card, absolute pojok kanan bawah)
    fullWidth=true  → tombol full-width (product-show)
--}}
<div>
    @if ($message)
        <p @class([
            'text-red-500 leading-tight',
            'text-[10px] text-center' => !$fullWidth,
            'text-xs mb-1'            => $fullWidth,
        ])>{{ $message }}</p>
    @endif

    @if ($fullWidth)
        {{-- Full-width untuk halaman detail produk --}}
        <button type="button" wire:click="add" wire:loading.attr="disabled"
            @class([
                'w-full h-12 flex items-center justify-center gap-2 font-semibold text-sm rounded-xl shadow-sm transition-all duration-200 active:scale-[0.98]',
                'bg-green-500 text-white shadow-green-200' => $added,
                'bg-orange-500 text-white shadow-orange-200 hover:bg-orange-600' => !$added,
            ])>
            @if ($added)
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/>
                </svg>
                Ditambahkan!
            @else
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"/>
                </svg>
                Tambah ke Keranjang
            @endif
        </button>
    @else
        {{-- Bulat kecil untuk product card --}}
        <button type="button" wire:click="add" wire:loading.attr="disabled"
            @class([
                'w-9 h-9 rounded-full flex items-center justify-center shadow-md transition-all duration-200 active:scale-90',
                'bg-green-500 shadow-green-200'                       => $added,
                'bg-orange-500 shadow-orange-200 hover:bg-orange-600' => !$added,
            ])>
            @if ($added)
                <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/>
                </svg>
            @else
                <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"/>
                </svg>
            @endif
        </button>
    @endif
</div>