<script setup lang="ts">
import { ref } from 'vue'
import { motion } from 'motion-v'
import { Switch } from 'reka-ui/namespaced';
const checked = ref(false)

const toggleChecked = () => {
  checked.value = !checked.value
}
</script>

<template>
  <div class="container">
    <Switch.Root 
      v-model="checked"
      :class="{ checked: checked }"
      @click="toggleChecked"
    >
      <motion.button
        class="switch" 
        :initial="false"
        :animate="{
          backgroundColor: checked ? '#4ff0b7' : 'var(--hue-6-transparent)'
        }"
        :style="{
          justifyContent: checked ? 'flex-end' : 'flex-start'
        }"
        :while-focus="{
          boxShadow: '0 0 0 5px #0f1115, 0 0 0 10px var(--hue-6-transparent)',
          transition: { duration: 0.2 }
        }"
      >
        <Switch.Thumb as-child>
          <motion.div
            class="thumb-inner"
            :data-checked="checked"
            :layout="true"
            :transition="{
              type: 'spring',
              stiffness: 500,
              damping: 30
            }"
          />
        </Switch.Thumb>
      </motion.button>
    </Switch.Root>
  </div>
</template>

<style>
.container {
  display: flex;
  align-items: center;
}

.switch {
  width: 100px;
  padding: 10px;
  background-color: var(--hue-6-transparent);
  border-radius: 9999px;
  position: relative;
  outline: none;
  cursor: pointer;
  display: flex;
  border: none;
}

.switch:focus {
  box-shadow: 0 0 0 5px #0f1115, 0 0 0 10px var(--hue-6-transparent);
  transition: box-shadow 0.2s;
}

.thumb {
  display: flex;
  width: 100%;
}

.thumb-inner {
  display: block;
  width: 50px;
  height: 50px;
  background-color: #f5f5f5;
  border-radius: 50%;
}

.label {
  color: #f5f5f5;
  font-size: 15px;
  line-height: 1;
  padding-left: 15px;
}
</style>