<template>
  <ul class="space-y-2" id="cyp-conformance-result-check">
    <li
      class="flex justify-start items-center pr-4"
      v-for="(act, index) in displayData"
      :key="index"
      :title="act"
    >
      <span class="material-symbols-outlined text-primary mr-2">
        check_circle
      </span>
      <p
        class="px-2 py-1 border border-neutral-500 w-full whitespace-nowrap break-keep text-ellipsis overflow-hidden"
      >
        {{ act }}
      </p>
    </li>
  </ul>
</template>
<script setup>
// The Lucia project.
// Copyright 2023-2026 DSP, inc.  All rights reserved.
// Authors:
//   chiayin.kuo@dsp.im (chiayin), 2023/1/31
//   imacat.yang@dsp.im (imacat), 2023/9/23
/**
 * @module components/Discover/Conformance/ConformanceSidebar/ResultCheck
 *   Conformance result display with check-circle icons showing
 *   matched activities.
 */

import { ref, watch, onBeforeUnmount } from "vue";
import emitter from "@/utils/emitter";

const props = defineProps(["data", "select"]);

const displayData = ref(props.select);

watch(
  () => props.data,
  (newValue) => {
    displayData.value = newValue;
  },
);

watch(
  () => props.select,
  (newValue) => {
    displayData.value = newValue;
  },
);

emitter.on("reset", (val) => (displayData.value = val));

onBeforeUnmount(() => {
  emitter.off("reset");
});
</script>
