@props(['dropdown' => false])

<td {{ $attributes->merge(['class' => 'px-4 py-3 text-right whitespace-nowrap']) }}>
    @if($dropdown)
        <div class="relative inline-block text-left" x-data="{ open: false }">
            <button 
                @click="open = !open" 
                @click.away="open = false"
                type="button" 
                class="inline-flex items-center p-1 text-sm font-medium text-gray-700 bg-white rounded-md hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700"
            >
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                    <path d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z" />
                </svg>
            </button>

            <div 
                x-show="open"
                x-transition:enter="transition ease-out duration-100"
                x-transition:enter-start="transform opacity-0 scale-95"
                x-transition:enter-end="transform opacity-100 scale-100"
                x-transition:leave="transition ease-in duration-75"
                x-transition:leave-start="transform opacity-100 scale-100"
                x-transition:leave-end="transform opacity-0 scale-95"
                class="absolute right-0 z-50 mt-2 w-48 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:bg-gray-800 dark:ring-gray-700"
                style="position: absolute; min-width: 12rem; transform: translateX(-10%) translateY(0)"
            >
                <div class="py-1">
                    {{ $slot }}
                </div>
            </div>
        </div>
    @else
        <div class="flex items-center justify-end space-x-2">
            {{ $slot }}
        </div>
    @endif
</td>