<template>
    <form-field>
        <label>{{label}}</label>
        <div :class="{switch: true, active: modelValue}" @click="handleClick">
            <div class="indicator"></div>
        </div>
    </form-field>
</template>

<script>
import FormField from './FormField.vue'

 export default {
     props: ["label", "modelValue"],
    components: { FormField },
     methods: {
         handleClick() {
             this.$emit("update:modelValue", !this.modelValue)
    }
    }
}
</script>

<style scoped>
.switch {
  background: #21242b;
    border-radius: 15px;
    height: 36px;
    width: 75px;
}
.indicator {
    width: 26px;
    height: 26px;
    border-radius: 13px;
    background: white;
    position: relative;
    top: 4px;
    left: 5px;
    background: #282c33;
    transition: all 0.2s;
}

.switch.active .indicator {
    transition: all 0.2s;
    top: 4px;
    left: 45px;
    background: #336699;
}
</style>
