<template>
  <div class="toggle-switch" :style="component.style">
    <div></div>
  </div>
</template>

<script setup>
import { defineProps } from 'vue';

const props = defineProps({
  component: Object,
});
</script>

<style scoped>
.toggle-switch {
  width: 50px;
  height: 25px;
  background-color: #ccc;
  border-radius: 25px;
  position: relative;
  cursor: pointer;
  box-sizing: border-box;
}
.toggle-switch div {
  width: 23px;
  height: 23px;
  background-color: white;
  border-radius: 50%;
  position: absolute;
  top: 1px;
  left: 1px;
  transition: all 0.2s ease-in-out;
}

/* Example for an "active" state - could be driven by a prop */
/*
.toggle-switch.active {
  background-color: #007bff;
}
.toggle-switch.active div {
  left: 26px;
}
*/
</style>
