---
import { availableLanguages, availableContentTypes, getLanguageName } from '../lib/api';

interface Props {
  currentLang: string;
  currentType: string;
}

const { currentLang, currentType } = Astro.props;
---

<div class="flex flex-wrap gap-4">
  <select 
    name="language" 
    id="language"
    class="px-4 py-2 rounded-md bg-secondary text-primary border border-hover focus:border-accent focus:outline-none focus:ring-1 focus:ring-accent transition-colors"
  >
    {availableLanguages.map(lang => (
      <option value={lang} selected={lang === currentLang}>
        {getLanguageName(lang)}
      </option>
    ))}
  </select>

  <select 
    name="contentType" 
    id="contentType"
    class="px-4 py-2 rounded-md bg-secondary text-primary border border-hover focus:border-accent focus:outline-none focus:ring-1 focus:ring-accent transition-colors"
  >
    {availableContentTypes.map(type => (
      <option value={type} selected={type === currentType}>
        {type.toUpperCase()}
      </option>
    ))}
  </select>
</div>

<script>
  const langSelect = document.getElementById('language') as HTMLSelectElement;
  const typeSelect = document.getElementById('contentType') as HTMLSelectElement;

  function updateURL() {
    const lang = langSelect.value;
    const type = typeSelect.value;
    window.location.href = `/${lang}/${type}`;
  }

  langSelect.addEventListener('change', updateURL);
  typeSelect.addEventListener('change', updateURL);
</script>