<template>
  <div
    class="relative two-imgs-container w-[18px] h-[24px] cursor-pointer mt-1 mr-2"
  >
    <!-- A relative div containing two absolutely positioned img elements -->
    <img
      v-if="!isChecked"
      :src="ImgCheckboxGrayFrame"
      class="absolute"
      alt="checkbox"
    />
    <img
      v-if="isChecked"
      :src="ImgCheckboxBlueFrame"
      class="absolute"
      alt="checkbox"
    />
    <img
      v-if="isChecked"
      :src="ImgCheckboxCheckedMark"
      class="absolute top-[11x] left-[2px] h-[16px] w-[14px]"
      alt="checkbox"
    />
  </div>
</template>

<script setup>
// The Lucia project.
// Copyright 2024-2026 DSP, inc.  All rights reserved.
// Authors:
//   cindy.chang@dsp.im (Cindy Chang), 2024/5/30
//   imacat.yang@dsp.im (imacat), 2023/9/23
/**
 * @module components/icons/IconChecked Checkbox icon component
 *   that toggles between checked and unchecked states.
 */

import ImgCheckboxBlueFrame from "@/assets/icon-blue-checkbox.svg";
import ImgCheckboxCheckedMark from "@/assets/icon-checkbox-checked.svg";
import ImgCheckboxGrayFrame from "@/assets/icon-checkbox-empty.svg";

defineProps({
  isChecked: {
    type: Boolean,
    required: true,
  },
});
</script>
