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

const props = defineProps({
  onSwitch: Function,
  value: Boolean,
  title: String,
  disabled: Boolean,
  description: String,
  icon: String,
  color: String,
});

const uniqueId = Math.random().toString(36).substring(7);
</script>

<template>
  <div class="field">
    <label class="label">{{ title }}</label>
    <input
      :id="uniqueId"
      type="checkbox"
      :name="uniqueId"
      class="switch is-rounded is-outlined is-success"
      :checked="value"
      @change="onSwitch($event.target.checked)"
      :disabled="disabled"
    />
    <label :for="uniqueId" class="label"></label>
    <p class="help">{{ description }}</p>
  </div>
</template>

<style scoped>

</style>