@props(['route', 'size' => 'md'])

@php
    $sizeClasses = match($size) {
        'sm' => 'px-3 py-2 text-sm gap-1.5',
        'lg' => 'px-6 py-3 text-base gap-2.5',
        default => 'px-4 py-2.5 text-sm gap-2',
    };
@endphp

<button
    type="button"
    x-data
    @click="
        const win = window.open('{{ $route }}', '_blank', 'width=350,height=600,scrollbars=yes,resizable=yes');
        if (win) {
            win.focus();
        }
    "
    {{ $attributes->merge(['class' => "inline-flex items-center justify-center {$sizeClasses} bg-green-600 text-white rounded-lg font-medium hover:bg-green-700 active:bg-green-800 active:scale-[0.97] focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 transition-all"]) }}
>
    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z"/>
    </svg>
    {{ __('طباعة الإيصال') }}
</button>
