<script setup>
const { isDark, toggleTheme, initTheme, currentTheme } = useTheme()

onMounted(() => {
  initTheme()
})
</script>

<template>
  <button
    @click="toggleTheme"
    class="theme-toggle"
    :title="isDark ? 'Switch to light mode' : 'Switch to dark mode'"
    :aria-label="isDark ? 'Switch to light mode' : 'Switch to dark mode'"
  >
    <!-- Sun Icon (shown in dark mode) -->
    <svg
      v-if="isDark"
      xmlns="http://www.w3.org/2000/svg"
      width="20"
      height="20"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      stroke-width="2"
      stroke-linecap="round"
      stroke-linejoin="round"
      class="theme-icon sun"
    >
      <circle cx="12" cy="12" r="5"></circle>
      <line x1="12" y1="1" x2="12" y2="3"></line>
      <line x1="12" y1="21" x2="12" y2="23"></line>
      <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
      <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
      <line x1="1" y1="12" x2="3" y2="12"></line>
      <line x1="21" y1="12" x2="23" y2="12"></line>
      <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
      <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
    </svg>

    <!-- Moon Icon (shown in light mode) -->
    <svg
      v-else
      xmlns="http://www.w3.org/2000/svg"
      width="20"
      height="20"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      stroke-width="2"
      stroke-linecap="round"
      stroke-linejoin="round"
      class="theme-icon moon"
    >
      <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
    </svg>
  </button>
</template>

<style scoped>
.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  min-width: 2.5rem;
  height: auto;
  border-radius: 0.5rem;
  border: 1px solid var(--theme-border);
  background-color: var(--theme-surface);
  color: var(--theme-text-primary);
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.theme-toggle:hover {
  background-color: var(--theme-bg-hover);
  border-color: var(--theme-primary);
}

.theme-toggle:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--theme-primary);
}

.theme-icon {
  transition: transform 0.3s ease;
  width: 1.25rem;
  height: 1.25rem;
}

.theme-icon.sun {
  color: #fbbf24;
}

.theme-icon.moon {
  color: var(--theme-primary);
}

.theme-toggle:hover .theme-icon {
  transform: rotate(15deg);
}

/* Dark mode specific styling */
.dark .theme-toggle,
[data-mode="dark"] .theme-toggle {
  border-color: var(--theme-border);
  background-color: var(--theme-surface);
}

.dark .theme-toggle:hover,
[data-mode="dark"] .theme-toggle:hover {
  background-color: var(--theme-bg-hover);
  border-color: var(--theme-accent);
}

.dark .theme-icon.sun,
[data-mode="dark"] .theme-icon.sun {
  color: #fbbf24;
}

/* Mobile/Tablet responsive adjustments */
@media (max-width: 1024px) {
  .theme-toggle {
    padding: 0.5rem;
    min-width: 2.5rem;
  }
}

@media (max-width: 768px) {
  .theme-toggle {
    padding: 0.375rem;
    min-width: 2.25rem;
  }

  .theme-icon {
    width: 1.125rem;
    height: 1.125rem;
  }
}
</style>
