<?php
/**
 * Reusable language dropdown partial.
 * Usage: Set $dropdownId before including, e.g. $dropdownId = 'header';
 * This renders a button + dropdown menu with flag images.
 */
$dropdownId = $dropdownId ?? 'header';
$btnId = $dropdownId . 'LangBtn';
$menuId = $dropdownId . 'LangMenu';

$languages = [
    ['code' => 'en', 'flag' => 'gb', 'check' => Lang::isEn()],
    ['code' => 'sr', 'flag' => 'rs', 'check' => Lang::isSr()],
    ['code' => 'cs', 'flag' => 'cz', 'check' => Lang::isCs()],
    ['code' => 'cn', 'flag' => 'cn', 'check' => Lang::isCn()],
    ['code' => 'de', 'flag' => 'de', 'check' => Lang::isDe()],
    ['code' => 'el', 'flag' => 'gr', 'check' => Lang::isEl()],
    ['code' => 'es', 'flag' => 'es', 'check' => Lang::isEs()],
    ['code' => 'fr', 'flag' => 'fr', 'check' => Lang::isFr()],
    ['code' => 'hu', 'flag' => 'hu', 'check' => Lang::isHu()],
        ['code' => 'il', 'flag' => 'il', 'check' => Lang::isIl()],
    ['code' => 'it', 'flag' => 'it', 'check' => Lang::isIt()],
        ['code' => 'jp', 'flag' => 'jp', 'check' => Lang::isJp()],
    ['code' => 'nl', 'flag' => 'nl', 'check' => Lang::isNl()],
    ['code' => 'no', 'flag' => 'no', 'check' => Lang::isNo()],
    ['code' => 'pl', 'flag' => 'pl', 'check' => Lang::isPl()],
    ['code' => 'pt', 'flag' => 'pt', 'check' => Lang::isPt()],
    ['code' => 'ro', 'flag' => 'ro', 'check' => Lang::isRo()],
    ['code' => 'ru', 'flag' => 'ru', 'check' => Lang::isRu()],
    ['code' => 'sv', 'flag' => 'se', 'check' => Lang::isSv()],
    ['code' => 'tr', 'flag' => 'tr', 'check' => Lang::isTr()],
];

$currentFlag = 'gb';
foreach ($languages as $lang) {
    if ($lang['check']) {
        $currentFlag = $lang['flag'];
        break;
    }
}
?>
<div class="relative">
    <button id="<?= $btnId ?>" type="button" class="flex items-center gap-1 p-2 rounded-lg bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors" title="<?= Lang::get('language') ?>" style="height: 36px;">
        <img src="https://flagcdn.com/w40/<?= $currentFlag ?>.png" alt="" class="w-5 h-auto rounded-sm">
        <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
        </svg>
    </button>
    <div id="<?= $menuId ?>" class="absolute right-0 mt-2 bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 z-50 hidden p-2" style="width: 250px;">
        <div style="display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px;">
            <?php foreach ($languages as $lang): ?>
                <a href="<?= APP_URL ?>/lang/<?= $lang['code'] ?>"
                   class="flex items-center justify-center rounded <?= $lang['check'] ? 'ring-2 ring-primary-500 bg-primary-50 dark:bg-primary-900/30' : 'hover:bg-gray-100 dark:hover:bg-gray-700' ?>"
                   style="width: 36px; height: 28px;"
                   title="<?= strtoupper($lang['flag']) ?>">
                    <img src="https://flagcdn.com/w40/<?= $lang['flag'] ?>.png" alt="<?= strtoupper($lang['flag']) ?>" class="w-6 h-auto rounded-sm">
                </a>
            <?php endforeach; ?>
        </div>
    </div>
</div>
<script>
(function(){
    var btn = document.getElementById('<?= $btnId ?>');
    var menu = document.getElementById('<?= $menuId ?>');
    if (!btn || !menu) return;
    btn.addEventListener('click', function(e) {
        e.stopPropagation();
        menu.classList.toggle('hidden');
    });
    document.addEventListener('click', function(e) {
        if (!btn.contains(e.target) && !menu.contains(e.target)) {
            menu.classList.add('hidden');
        }
    });
    document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape') menu.classList.add('hidden');
    });
})();
</script>
