<template>
  <label class="base-input-container">
    <input
      :checked="checked"
      type="checkbox"
      class="base-input-container__input"
      @click.prevent="$emit('input', $event.target.checked, item)"
    >
    <span
      :class="{'base-input-container__checkbox': type==='checkbox', 'base-input-container__radiobutton': type === 'radiobutton'}"
      class="base-input-container__icon checkbox">
      <tick v-if="type === 'checkbox'"/>
      <circle-icon
        data-cy="circle-icon"
        v-if="type === 'radiobutton'"/>
    </span>
    <span
      class="base-input-container__label"
      v-if="label">{{ label }}</span>
    <slot
      class="base-input-container__label"
      v-if="!label"/>
  </label>
</template>

<script>
  import Tick from '@/components/icons/Tick';
  import CircleIcon from '@/components/icons/CircleIcon';

  export default {
    props: {
      label: String,
      checked: {
        type: Boolean
      },
      item: Object,
      type: String
    },

    components: {
      Tick,
      CircleIcon
    }
  };
</script>
