@props(['title', 'description', 'exportPdf', 'exportExcel'])

<div>
    <flux:modal name="exportar" class="max-w-md" {{ $attributes->only('wire:model') }}>

    <div class="space-y-6">
        <flux:heading size="lg">{{ $title }}</flux:heading>

        <div class="space-y-3">
            <p class="text-sm text-zinc-600 dark:text-zinc-400 mb-4">
                {{ $description }}
            </p>

            <button wire:click="{{ $exportExcel }}" type="button"
                wire:loading.attr="disabled"
                wire:target="{{ $exportExcel }}"
                class="w-full flex items-center gap-4 p-4 border dark:border-zinc-700 rounded-lg hover:bg-zinc-50 dark:hover:bg-zinc-800/50 transition-colors group disabled:opacity-50 disabled:cursor-not-allowed">
                <div
                    class="flex-shrink-0 w-10 h-10 bg-green-100 dark:bg-green-900/20 rounded-lg flex items-center justify-center group-hover:bg-green-200 dark:group-hover:bg-green-900/30 transition-colors">
                    <flux:icon.document class="w-6 h-6 text-green-600 dark:text-green-400" wire:loading.remove wire:target="{{ $exportExcel }}" />
                    <svg wire:loading wire:target="{{ $exportExcel }}" class="animate-spin h-6 w-6 text-green-600 dark:text-green-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                    </svg>
                </div>
                <div class="flex-1 text-left">
                    <div class="font-medium">
                        <span wire:loading.remove wire:target="{{ $exportExcel }}">Exportar a Excel</span>
                        <span wire:loading wire:target="{{ $exportExcel }}">Generando Excel...</span>
                    </div>
                    <div class="text-xs text-zinc-500 dark:text-zinc-400">Archivo compatible con Microsoft Excel
                    </div>
                </div>
                <flux:badge color="green">XLSX</flux:badge>
            </button>

            <button wire:click="{{ $exportPdf }}" type="button"
                wire:loading.attr="disabled"
                wire:target="{{ $exportPdf }}"
                class="w-full flex items-center gap-4 p-4 border dark:border-zinc-700 rounded-lg hover:bg-zinc-50 dark:hover:bg-zinc-800/50 transition-colors group disabled:opacity-50 disabled:cursor-not-allowed">
                <div
                    class="flex-shrink-0 w-10 h-10 bg-red-100 dark:bg-red-900/20 rounded-lg flex items-center justify-center group-hover:bg-red-200 dark:group-hover:bg-red-900/30 transition-colors">
                    <flux:icon.document-text class="w-6 h-6 text-red-600 dark:text-red-400" wire:loading.remove wire:target="{{ $exportPdf }}" />
                    <svg wire:loading wire:target="{{ $exportPdf }}" class="animate-spin h-6 w-6 text-red-600 dark:text-red-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                    </svg>
                </div>
                <div class="flex-1 text-left">
                    <div class="font-medium">
                        <span wire:loading.remove wire:target="{{ $exportPdf }}">Exportar a PDF</span>
                        <span wire:loading wire:target="{{ $exportPdf }}">Generando PDF...</span>
                    </div>
                    <div class="text-xs text-zinc-500 dark:text-zinc-400">Documento portátil para imprimir</div>
                </div>
                <flux:badge color="red">PDF</flux:badge>
            </button>
        </div>
        <flux:button wire:loading variant="ghost" wire:click="$set('{{ $attributes->get('wire:model') }}', false)">
            Cancelar
        </flux:button>
    </div>

    </flux:modal>
</div>