<template>
  <div class="cc-summary" v-if="props.flags.length > 0 && infoText.length > 0">
    <v-icon class="intervention-icon">{{
      showCheck ? "$vuetify.icons.ic_intervention_check" : "$vuetify.icons.ic_intervention"
    }}</v-icon
    ><span class="common-caption-small" v-html="infoText" />
  </div>
</template>

<script setup lang="ts">
import { computed } from "vue";
import { ProofHintFlags } from "../../models/proof";

const props = defineProps<{
  flags: ProofHintFlags[];
}>();

const showCheck = computed(() => {
  return props.flags.some((f) => f?.valid);
});

const infoText = computed(() => {
  if (props.flags.some((f) => f.generator === "ai")) {
    return "<b>Contains AI generated media.</b> Take a closer look at the file details for each.";
  } else if (props.flags.some((f) => f.generator === "screenshot")) {
    return "<b>Contains screenshots.</b> Take a closer look at the file details for each.";
  }
  return "TODO - Content Credentials Info";
});
</script>

<style lang="scss">
@use "@/assets/css/chat.scss" as *;

.cc-summary {
  .intervention-icon {
    width: 12px;
    height: 12px;
    display: inline-flex;
  }
}
</style>
