---
import { SUPPORTED_LANGUAGES, getLanguageFromPath, getLocalizedPath, type SupportedLanguage } from '../lib/i18n';

// Get current language from URL
const currentPath = Astro.url.pathname;
const currentLang = getLanguageFromPath(currentPath);

// Generate language options
const languageOptions = SUPPORTED_LANGUAGES.map(lang => ({
  code: lang,
  name: lang === 'es' ? 'Español' : 'English',
  path: getLocalizedPath(currentPath, lang),
  isCurrent: lang === currentLang
}));
---

<div class="language-switcher">
  <select 
    id="language-select" 
    class="px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
    onchange="window.location.href = this.value"
  >
    {languageOptions.map((option: any) => (
      <option 
        value={option.path} 
        selected={option.isCurrent}
      >
        {option.name}
      </option>
    ))}
  </select>
</div>

<style>
  .language-switcher {
    display: inline-block;
  }
  
  .language-switcher select {
    background-color: white;
    font-size: 0.875rem;
    line-height: 1.25rem;
  }
  
  .language-switcher select:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
  }
</style>