<template>
  <div class="toggle" :class="{ active: props.modelValue }" @click="onUpdate">
    <div class="circle"></div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  props: {
    modelValue: {
      default: "",
    },
  },
  setup(props, { emit }) {
    const onUpdate = (): void => {
      emit("update:modelValue", !props.modelValue);
    };

    return {
      props,
      onUpdate,
    };
  },
});
</script>
<style lang="scss">
.toggle {
  width: 48px;
  height: 24px;
  border-radius: 50px;
  background-color: var(--grey-5);
  padding: 4px;
  cursor: pointer;
  transition: background-color 0.2s ease;

  .circle {
    background-color: var(--background-primary);
    border-radius: 50%;
    width: 16px;
    height: 16px;
    transition: transform 0.2s ease;
  }

  &.active {
    background-color: var(--blue);

    .circle {
      transform: translateX(24px);
    }
  }

  @include screen-lg() {
    width: 62px;
    height: 34px;
    padding: 5px;

    .circle {
      width: 24px;
      height: 24px;
    }

    &.active {
      .circle {
        transform: translateX(28px);
      }
    }
  }
}
</style>
