<script setup lang="ts">
import { ref, onMounted } from "vue";
import Icon from "./Icon.vue";

const theme = ref("sunset");

onMounted(() => {
  const stored = localStorage.getItem("theme");
  if (stored) {
    theme.value = stored;
    document.documentElement.setAttribute("data-theme", stored);
  }
});

function toggleTheme() {
  const newTheme = theme.value === "sunset" ? "winter" : "sunset";
  theme.value = newTheme;
  document.documentElement.setAttribute("data-theme", newTheme);
  localStorage.setItem("theme", newTheme);
}
</script>

<template>
  <button
    @click="toggleTheme"
    class="btn btn-ghost btn-circle"
    aria-label="Toggle Theme"
  >
    <Icon :name="theme === 'sunset' ? 'moon' : 'sun'" class="w-5 h-5" />
  </button>
</template>
