<script lang="ts" setup>
import { ref } from 'vue'

const props = defineProps({
  value: {
    type: Boolean,
    default: true,
  },
  label: {
    type: String,
    default: '',
  },
})

const emit = defineEmits<{
  (e: 'update:value', value: boolean): void
}>()

const download = ref(props.value)

function onChange(value: boolean) {
  emit('update:value', value)
}
</script>

<template>
  <div class="download">
    <span class="download-title">{{ label }}</span>
    <n-switch v-model:value="download" @update:value="onChange" />
  </div>
</template>

<style lang="less" scoped>
.download {
  display: flex;
  padding: 10px;
  justify-content: space-between;

  &-title {
    font-weight: bold;
  }
}
</style>
