<template>
  <div @click="handleClick" class="animation-toggle-container">
    <div><p>Activer les animations</p></div>
    <label class="switch">
      <input type="checkbox" v-model="animationsAreEnabled"  @click.stop @change="toggleAnimation" />
      <span class="slider round"></span>
    </label>
  </div>
</template>

<script>

import { useMapStore } from '../stores/map';
import { storeToRefs } from 'pinia';

export default {
  setup() {
    const mapStore = useMapStore();

    const { animationsAreEnabled } = storeToRefs(mapStore);

    const toggleAnimation = () => {
      mapStore.toggleAnimation();
    };

    const handleClick = () => {
      toggleAnimation();
    };

    return {
      handleClick,
      toggleAnimation,
      animationsAreEnabled,
    };
  },
};
</script>
