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

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

const handleChange = () => {
  emit('update:checked', !props.checked)
}
</script>

<template>
  <div>
    <label class="flex items-center cursor-pointer justify-center ">
      <span class="label-text pr-2 text-lg">{{ text }}</span>
      <input type="checkbox" class="toggle toggle-primary" :checked="props.checked" :disabled="props.disabled" @change="handleChange">
    </label>
  </div>
</template>

<style lang="scss" scoped>

</style>
