<script setup lang="ts">
import { useTheme } from "../composables/useTheme";

const { isDarkMode, toggleTheme } = useTheme();
</script>

<template>
  <div class="ThemeToggle">
    <button
      class="theme-toggle"
      :class="{ 'theme-toggle--toggled': isDarkMode }"
      type="button"
      title="Toggle theme"
      aria-label="Toggle theme"
      @click="toggleTheme"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        aria-hidden="true"
        width="2.5em"
        height="2.5em"
        fill="currentColor"
        class="theme-toggle__around"
        viewBox="0 0 32 32"
      >
        <clipPath id="theme-toggle__around__cutout">
          <path d="M0 0h42v30a1 1 0 00-16 13H0Z" />
        </clipPath>
        <g clip-path="url(#theme-toggle__around__cutout)">
          <circle cx="16" cy="16" r="8.4" />
          <g>
            <circle cx="16" cy="3.3" r="2.3" />
            <circle cx="27" cy="9.7" r="2.3" />
            <circle cx="27" cy="22.3" r="2.3" />
            <circle cx="16" cy="28.7" r="2.3" />
            <circle cx="5" cy="22.3" r="2.3" />
            <circle cx="5" cy="9.7" r="2.3" />
          </g>
        </g>
      </svg>
    </button>
  </div>
</template>

<style scoped>
@import "theme-toggles/css/around.css";

.ThemeToggle {
  margin: 1em 1em;
  transition:
    transform 0.3s,
    opacity 0.3s;
}

.theme-toggle {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  width: 32px;
  height: 32px;
  color: var(--text-color);
}

.theme-toggle:hover {
  color: var(--primary-color);
}
</style>
