@props([
    'target' => null, // The target textarea/input ID or x-ref
    'size' => 'sm',
])

@php
    $dropdownId = uniqid('emoji-picker-');
    $targetSelector = $target ? "document.querySelector('#{$target}'), document.querySelector('[x-ref=\"{$target}\"]')" : 'null';
@endphp

<div class="dropdown emoji-picker-dropdown" x-data="emojiPicker('{{ $target }}')">
    <button type="button" 
        class="btn btn-light btn-{{ $size }} btn-icon btn-round"
        data-bs-toggle="dropdown"
        x-ref="trigger"
        title="{{ __('Add emoji') }}">
        <x-ui.nicon name="happy" class="text-primary"/>
    </button>
    
    <div class="dropdown-menu dropdown-menu-end emoji-picker-menu" style="width: 280px; max-height: 300px;">
        <div class="dropdown-header">
            <h6 class="mb-0 py-2">{{ __('Choose an emoji') }}</h6>
        </div>
        <div class="emoji-categories" style="max-height: 240px; overflow-y: auto;">
            <!-- Smileys & People -->
            <div class="emoji-category">
                <h6 class="emoji-category-title px-3 py-2 mb-1 bg-light text-muted small">
                    {{ __('Smileys & People') }}
                </h6>
                <div class="emoji-grid px-1">
                    <template x-for="emoji in smileysEmojis" :key="emoji.char">
                        <button type="button" 
                            class="emoji-item"
                            x-on:click="insertEmoji(emoji.char)"
                            :title="emoji.name"
                            x-text="emoji.char">
                        </button>
                    </template>
                </div>
            </div>
            
            <!-- Hearts & Symbols -->
            <div class="emoji-category">
                <h6 class="emoji-category-title px-3 py-2 mb-1 bg-light text-muted small">
                    {{ __('Hearts & Symbols') }}
                </h6>
                <div class="emoji-grid px-1">
                    <template x-for="emoji in heartsEmojis" :key="emoji.char">
                        <button type="button" 
                            class="emoji-item"
                            x-on:click="insertEmoji(emoji.char)"
                            :title="emoji.name"
                            x-text="emoji.char">
                        </button>
                    </template>
                </div>
            </div>
            
            <!-- Objects & Activities -->
            <div class="emoji-category">
                <h6 class="emoji-category-title px-3 py-2 mb-1 bg-light text-muted small">
                    {{ __('Objects & Activities') }}
                </h6>
                <div class="emoji-grid px-1">
                    <template x-for="emoji in objectsEmojis" :key="emoji.char">
                        <button type="button" 
                            class="emoji-item"
                            x-on:click="insertEmoji(emoji.char)"
                            :title="emoji.name"
                            x-text="emoji.char">
                        </button>
                    </template>
                </div>
            </div>
        </div>
    </div>
</div>