---
import { DEFAULT_LANG, type Lang } from '@/i18n/utils';

interface Props {
  lang: Lang;
}
const { lang } = Astro.props;

const isDark = lang === 'en' ? 'dark' : 'light';
---
<button
  type="button"
  id="theme-toggle"
  aria-label={lang === 'en' ? 'Switch theme' : 'Cambiar tema'}
  class="p-2 rounded-md hover:bg-hds-line transition-colors"
  style="color: var(--hds-fg-soft);"
>
  <svg class="theme-icon-sun w-5 h-5 hidden dark:block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
    <circle cx="12" cy="12" r="4"/>
    <path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41"/>
  </svg>
  <svg class="theme-icon-moon w-5 h-5 block dark:hidden" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
    <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
  </svg>
</button>

<script is:inline>
  (function() {
    const btn = document.getElementById('theme-toggle');
    if (!btn) return;
    btn.addEventListener('click', () => {
      const isDark = document.documentElement.classList.toggle('dark');
      try { localStorage.setItem('theme', isDark ? 'dark' : 'light'); } catch(e) {}
    });
  })();
</script>
