<script setup>
import { ref } from 'vue'
const enabled = ref(false)
</script>

<template>
  <button 
    @click="enabled = !enabled"
    :class="enabled ? 'bg-green-500' : 'bg-gray-200'"
    class="relative h-8 w-14 rounded-full transition-colors duration-200"
  >
    <span 
      :class="enabled ? 'translate-x-6' : 'translate-x-0'"
      class="block h-7 w-7 bg-white rounded-full shadow transition-transform duration-200" 
    />
  </button>
</template>