<template>
  <div class="flex items-center" @click="$emit('change', !checked)">
    <img class="w-4 mr-1" :src="checked ? checkedIcon : notCheckedIcon" />
    <span>
      <slot />
    </span>
  </div>
</template>

<script>
import Vue from "vue";

const notCheckedIcon = require("@/assets/icons/not_checked_2.png");
const checkedIcon = require("@/assets/icons/checked.png");

export default Vue.extend({
  props: ["checked"],
  data() {
    return {
      notCheckedIcon,
      checkedIcon,
    };
  },
});
</script>

<style>
</style>