<template>
  <div class="lanaya-checkbox" @click="clickHandler">
    <span class="lanaya-checkbox__input" :class="isChecked"></span>
    <input class="lanaya-checkbox__original" :checked="value" type="checkbox"/>
    <span class="lanaya-checkbox__label" :class="isChecked">
      <slot></slot>
    </span>
  </div>
</template>

<script>
export default {
  name: 'LCheckbox',
  computed: {
    isChecked () {
      return this.value ? 'is-checked' : '';
    }
  },
  methods: {
    clickHandler () {
      this.$emit('input', !this.value);
      this.$emit('change', !this.value);
    }
  },
  props: {
    value: {
      type: Boolean,
      default: false
    }
  }
};
</script>
