---
/**
 * Theme Switcher Component
 * Allows users to toggle between light and dark themes
 * Persists theme preference to localStorage
 */
import './ThemeSwitcher.css';
import { BodyMd } from '@/components/primitives';
import { Icon } from 'astro-icon/components';

interface Props {
  showLabels?: boolean;
}

const { showLabels = true } = Astro.props;
---

<button data-theme-toggle class="toggle" aria-label="Toggle theme">
  <div class="toggle-icon">
    <Icon
      name="fluent:weather-moon-16-regular"
      class="moon"
      size="20"
      color="var(--color-icon-primary)"
    />
    <Icon
      name="fluent:weather-sunny-16-regular"
      class="sun"
      size="20"
      color="var(--color-icon-primary)"
    />
  </div>
  <BodyMd
    vMargin={false}
    class={`label-dark ${!showLabels ? 'sr-only' : ''}`}
    aria-label="Switch to light mode">Switch to light mode</BodyMd
  >
  <BodyMd
    vMargin={false}
    class={`label-light ${!showLabels ? 'sr-only' : ''}`}
    aria-label="Switch to dark mode">Switch to dark mode</BodyMd
  >
</button>

<script>
  const handleToggleClick = () => {
    const element = document.documentElement;
    const currentTheme = element.getAttribute('data-theme');
    localStorage.setItem('theme', currentTheme === 'dark' ? 'light' : 'dark');
    document.documentElement.setAttribute('data-theme', currentTheme === 'dark' ? 'light' : 'dark');
  };

  document.querySelectorAll('[data-theme-toggle]').forEach((button) => {
    button.addEventListener('click', handleToggleClick);
  });
</script>
