<template>
  <button
      @click="toggleTheme"
      class="theme"
  >
    <icon v-if="theme === 'light'" name="line-md:moon-alt-loop" size="22" />
    <icon v-else name="line-md:sunny-outline-loop" size="22" />
  </button>
</template>

<script setup lang="ts">
import { useThemes } from '@composables/themes';

const { theme, toggleTheme } = useThemes();
</script>

<style scoped lang="scss">
.theme {
  background-color: transparent;
  border-radius: $less_border_radius;
  padding: 5px;
  cursor: pointer;
  color: $primary;
  transition: all 0.3s ease;

  @include hover {
    background-color: $primary_shadow;
  }

  & span {
    display: block;
  }
}
</style>