---
import { cn } from '@/lib/cn';

interface Props {
  class?: string;
}

const { class: className } = Astro.props;
---

<button
  type="button"
  id="theme-toggle"
  class={cn(
    'inline-flex items-center justify-center rounded-md p-2',
    'text-muted-foreground hover:text-foreground hover:bg-secondary',
    'transition-colors duration-(--transition-fast)',
    'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
    className
  )}
  aria-label="Toggle theme"
>
  <!-- Sun icon (shown in dark mode) -->
  <svg
    class="h-5 w-5 hidden dark:block"
    xmlns="http://www.w3.org/2000/svg"
    fill="none"
    viewBox="0 0 24 24"
    stroke="currentColor"
    stroke-width="2"
    aria-hidden="true"
  >
    <path
      stroke-linecap="round"
      stroke-linejoin="round"
      d="M12 3v2.25m6.364.386l-1.591 1.591M21 12h-2.25m-.386 6.364l-1.591-1.591M12 18.75V21m-4.773-4.227l-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z"
    />
  </svg>

  <!-- Moon icon (shown in light mode) -->
  <svg
    class="h-5 w-5 block dark:hidden"
    xmlns="http://www.w3.org/2000/svg"
    fill="none"
    viewBox="0 0 24 24"
    stroke="currentColor"
    stroke-width="2"
    aria-hidden="true"
  >
    <path
      stroke-linecap="round"
      stroke-linejoin="round"
      d="M21.752 15.002A9.718 9.718 0 0118 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 003 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 009.002-5.998z"
    />
  </svg>
</button>

<script>
  function initThemeToggle() {
    const toggle = document.getElementById('theme-toggle');

    // Guard: skip if not found or already initialised on this element
    if (!toggle || toggle.dataset.themeInit) return;
    toggle.dataset.themeInit = 'true';

    toggle.addEventListener('click', () => {
      const isDark = document.documentElement.classList.contains('dark');

      if (isDark) {
        document.documentElement.classList.remove('dark');
        sessionStorage.setItem('theme', 'light');
      } else {
        document.documentElement.classList.add('dark');
        sessionStorage.removeItem('theme');
      }
    });
  }

  // Run on initial load and after every view-transition swap
  initThemeToggle();
  document.addEventListener('astro:after-swap', initThemeToggle);
</script>
