---
import Icon from './icon.astro';
---

<button
  id="theme-toggle"
  aria-label="Theme toggle"
  class="fixed bottom-3 left-3 z-10 inline-flex h-10 w-10 items-center justify-center rounded-lg bg-gray-100 text-gray-400 shadow-xl transition focus:ring-primary-500 dark:bg-gray-600 dark:text-gray-200"
>
  <Icon class="block dark:hidden" name="ri:moon-fill" size={20} />
  <Icon class="hidden dark:block" name="ri:sun-line" size={20} />
</button>

<script>
  const themeToggle = document.getElementById('theme-toggle')!;

  const toggleTheme = () => {
    const theme = localStorage.getItem('theme') ?? 'light';
    const newTheme = theme === 'light' ? 'dark' : 'light';

    document.documentElement.classList[newTheme === 'dark' ? 'add' : 'remove']('dark');
    localStorage.setItem('theme', newTheme);
  };

  themeToggle.addEventListener('click', toggleTheme);
</script>
