---
import { themeConfig } from '@/config'
---

{
  themeConfig.general.themeToggle && (
    <button id="theme-toggle" class="theme-toggle" aria-label="Toggle theme">
      <div class="theme-icon hollow-circle" />
      <div class="theme-icon solid-circle" />
    </button>
  )
}

<script is:inline>
  function bindThemeToggle() {
    const themeToggle = document.getElementById('theme-toggle')
    if (!themeToggle || !window.ThemeManager) return

    // Skip if already bound
    if (themeToggle.dataset.themeBound) return
    themeToggle.dataset.themeBound = 'true'

    themeToggle.addEventListener('click', function (e) {
      e.preventDefault()
      e.stopPropagation()
      window.ThemeManager.toggle()
    })
  }

  // Use only astro:page-load as it fires on initial load and navigation
  document.addEventListener('astro:page-load', bindThemeToggle)
</script>

<style>
  .theme-toggle {
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    height: 1.5rem;
    gap: 0.1875rem;
    color: var(--text-primary);
    transition: opacity 0.2s ease;
    padding: 0 0 0 0.5rem;
    position: relative;
  }

  .theme-icon {
    width: 0.4375rem;
    height: 0.4375rem;
    transition: all 0.2s ease;
  }

  .hollow-circle {
    border: none;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1.125px var(--text-primary);
  }

  .solid-circle {
    background-color: var(--text-primary);
    border-radius: 50%;
  }
</style>