@props(['items' => [], 'deleteAction' => null, 'deleteConfirm' => null])

@php $isAr = app()->getLocale() === 'ar'; @endphp

<div class="relative" x-data="{ open: false }">
    <button @click="open = !open" @click.outside="open = false" type="button"
            class="w-8 h-8 flex items-center justify-center rounded-lg bg-surface-100 dark:bg-surface-800 text-surface-500 dark:text-surface-400 hover:bg-surface-200 dark:hover:bg-surface-700 transition-colors">
        <i class="fa-solid fa-ellipsis-vertical text-xs"></i>
    </button>
    <div x-show="open" x-cloak x-transition
         class="absolute end-0 z-50 mt-1 w-48 rounded-xl border border-surface-200 dark:border-surface-700 bg-white dark:bg-surface-900 shadow-lg overflow-hidden">
        @foreach($items as $item)
            @if(isset($item['url']))
            <a href="{{ $item['url'] }}"
               class="flex items-center gap-3 px-4 py-2.5 text-sm text-surface-700 dark:text-surface-300 hover:bg-surface-50 dark:hover:bg-surface-800 transition-colors">
                <i class="fa-solid {{ $item['icon'] }} w-4 text-center text-surface-400 text-xs"></i>
                {{ $item['label'] }}
            </a>
            @endif
        @endforeach

        @if($deleteAction)
        <div class="border-t border-surface-100 dark:border-surface-800"></div>
        <form method="POST" action="{{ $deleteAction }}"
              @submit.prevent="
                open = false;
                (typeof window.confirmDialog === 'function'
                    ? window.confirmDialog(@js($deleteConfirm ?? ($isAr ? 'هل أنت متأكد من الحذف؟' : 'Are you sure you want to delete this item?')))
                    : Promise.resolve(window.confirm(@js($deleteConfirm ?? ($isAr ? 'هل أنت متأكد من الحذف؟' : 'Are you sure?'))))
                ).then(ok => { if (ok) $el.submit(); })
              ">
            @csrf @method('DELETE')
            <button type="submit"
                    class="w-full flex items-center gap-3 px-4 py-2.5 text-sm text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-950/30 transition-colors">
                <i class="fa-solid fa-trash w-4 text-center text-xs"></i>
                {{ $isAr ? 'حذف' : 'Delete' }}
            </button>
        </form>
        @endif
    </div>
</div>