---
 import { getAllThemes } from '../lib/themes';

 const themes = getAllThemes();
---

<div class="theme-switcher">
  <label for="theme-select" class="theme-label">Theme</label>
  <select id="theme-select" class="theme-select">
    {themes.map((t) => <option value={t.id}>{t.name}</option>)}
  </select>
</div>

<script>
  import { getTheme, applyTheme, loadSavedTheme, saveTheme } from '../lib/themes';

  const select = document.getElementById('theme-select');
  
  if (select) {
    const currentTheme = loadSavedTheme();
    select.value = currentTheme;

    select.addEventListener('change', (e) => {
      const target = e.target;
      const themeId = target.value;
      const theme = getTheme(themeId);
      applyTheme(theme);
      saveTheme(themeId);
    });
  }
</script>

<style>
  .theme-switcher {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .theme-label {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--color-text);
  }

  .theme-select {
    padding: 0.6rem 0.75rem;
    border-radius: 8px;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: 0.9rem;
    cursor: pointer;
    min-width: 200px;
  }

  .theme-select:hover {
    border-color: var(--color-border-hover);
  }

  .theme-select:focus {
    outline: none;
    border-color: var(--color-primary);
  }

  .theme-select option {
    background: var(--color-surface);
    color: var(--color-text);
  }
</style>