@props([
    'options' => [],
    'current' => 'th',
])

<div class="dropdown relative inline-flex rtl:[--placement:bottom-end]">
    <button id="lang-dropdown" type="button" 
            class="flex items-center gap-2 dropdown-toggle hover:text-primary transition-colors duration-300 font-medium" 
            aria-haspopup="menu"
            aria-expanded="false" 
            aria-label="Language Switcher">
        @foreach($options as $option)
            @if($option['code'] === $current)
                <img src="{{ Module::asset($option['icon']) }}" class="size-6">
                {{ $option['name'] }}
            @endif
        @endforeach
        <span class="icon-[tabler--chevron-down] dropdown-open:rotate-180 size-3"></span>
    </button>
    
    <ul class="dropdown-menu dropdown-open:opacity-100 hidden min-w-20 !-left-5" 
        role="menu"
        aria-orientation="vertical" 
        aria-labelledby="lang-dropdown">
        @foreach($options as $option)
            <li>
                <a class="dropdown-item dropdown-item-hover flex items-center gap-2" 
                   href="#"
                   @if($option['code'] === $current) aria-current="true" @endif>
                    <img src="{{ Module::asset($option['icon']) }}" class="size-6">
                    {{ $option['name'] }}
                </a>
            </li>
        @endforeach
    </ul>
</div>