<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 lang="ts">
import { defineComponent } from "vue";
import notCheckedIcon from "@/assets/icons/not_checked.png";
import checkedIcon from "@/assets/icons/checked.png";
// const notCheckedIcon = require("@/assets/icons/not_checked_2.png");
// const checkedIcon = require("@/assets/icons/checked.png");

export default defineComponent({
  props: ["checked"],
  emits: ["change"],
  data() {
    return {
      notCheckedIcon,
      checkedIcon,
    };
  },
});
</script>

<style></style>
