<script>
import { GlIcon, GlTooltipDirective } from '@gitlab/ui';
import CodeBlock from '~/vue_shared/components/code_block.vue';
import DetailItem from './detail_item.vue';

export default {
  name: 'VulnerabilityDetailSection',
  components: { CodeBlock, DetailItem, GlIcon },
  directives: {
    GlTooltip: GlTooltipDirective,
  },
  props: {
    listData: {
      type: Array,
      required: true,
    },
    iconTitle: {
      type: String,
      required: false,
      default: '',
    },
    heading: {
      type: String,
      required: false,
      default: '',
    },
  },
};
</script>

<template>
  <section>
    <h3 v-if="heading">{{ heading }}</h3>
    <ul>
      <detail-item
        v-for="({ label, isCode, content }, index) in listData"
        :key="`${index}:${label}`"
        :sprintf-message="label"
      >
        <gl-icon
          v-if="iconTitle"
          v-gl-tooltip
          name="information-o"
          class="gl-hover-cursor-pointer gl-mr-3"
          :title="iconTitle"
        />
        <code-block v-if="isCode" class="gl-mt-2" :code="content" max-height="225px" />
        <template v-else>
          <span data-testid="detail-item-content-template">
            {{ content }}
          </span>
        </template>
      </detail-item>
    </ul>
  </section>
</template>
