---
import { getLocaleFromUrl, getLocalizedUrl } from '../utils/i18n';

const locale = getLocaleFromUrl(Astro.url);
const pathname = Astro.url.pathname;
const currentPath = pathname.replace(new RegExp(`^/${locale}`), '') || '/';

const languages = [
  { code: 'de', name: 'Deutsch' },
  { code: 'en', name: 'English' }
];
---

<div class="relative" x-data="{ open: false }">
  <button 
    @click="open = !open" 
    class="flex items-center space-x-1 p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300 transition-colors duration-200"
  >
    <span>{locale === 'de' ? 'DE' : 'EN'}</span>
    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
    </svg>
  </button>
  
  <div 
    x-show="open" 
    @click.away="open = false" 
    class="absolute right-0 mt-2 w-48 bg-white dark:bg-gray-800 shadow-lg rounded-md overflow-hidden z-10 border border-gray-200 dark:border-gray-700 transition-colors duration-200"
    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"
    style="display: none;"
  >
    <div class="py-1">
      {languages.map(lang => (
        <a 
          href={getLocalizedUrl(currentPath, lang.code)}
          class={`block px-4 py-2 text-sm transition-colors duration-200 ${
            locale === lang.code 
              ? 'bg-gray-100 dark:bg-gray-700 text-primary dark:text-blue-400' 
              : 'text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700'
          }`}
        >
          {lang.name}
        </a>
      ))}
    </div>
  </div>
</div>