<template>
  <div
    class="switch-control"
    :class="{ active: modelValue }"
    @click="toggle"
  >
    <span class="switch-label">{{ label }}</span>
    <span class="switch-track">
      <span class="switch-thumb" />
    </span>
  </div>
</template>

<script setup>
const props = defineProps({
  modelValue: { type: Boolean, default: false },
  label: { type: String, default: '' }
})

const emit = defineEmits(['update:modelValue'])

function toggle() {
  emit('update:modelValue', !props.modelValue)
}
</script>

<style lang="less" scoped>
.switch-control {
  display: flex;
  height: 40px;
  padding: 0 15px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  border-radius: 10px;
  border: 1px solid #E8E9EB;
  background: #f5f6f7;
  cursor: pointer;
  transition: background 0.2s;

  &:hover {
    background: #e9eaeb;
  }
}
.switch-label {
  font-family: "Microsoft YaHei";
  font-size: 12px;
  color: #999;
  white-space: nowrap;
  user-select: none;
}
.switch-track {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
  border-radius: 10px;
  background: #c0c4cc;
  transition: background 0.25s;
  flex-shrink: 0;

  .active & {
    background: #000F33;
  }
}
.switch-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.25s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);

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