<template>
  <label
    :data-checked="checked"
    data-cy="base-input-container"
    class="base-input-container"
  >
    <input
      :checked="checked"
      type="checkbox"
      class="base-input-container__input"
      data-cy="base-input-input"
      @change.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"
      data-cy="base-input-label"
      v-if="label"
      >{{ label }}</span
    >
    <slot
      class="base-input-container__label"
      v-if="!label"
    />
  </label>
</template>

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

export interface Props {
  label: string;
  checked: boolean;
  item: any;
  type: string;
}

const Tick = defineAsyncComponent(() => import('@/components/icons/Tick.vue'));
const CircleIcon = defineAsyncComponent(() => import('@/components/icons/CircleIcon.vue'));

defineProps<Props>();
defineEmits(['input']);
</script>
