<script setup lang="ts">
import { computed, type PropType } from "vue";
import SearchResultItem from "./SearchResultItem.vue";
import type { SearchResult } from "@/types/search.types";
import type { ResultMode } from "@/types/search.types";

const props = defineProps({
  data: {
    type: Object as PropType<SearchResult>,
    required: true,
  },
  mode: {
    type: String as PropType<ResultMode>,
    default() { return 'detail' },
  }
});

const docSize = computed(() => props.data.docs.length);
</script>

<template>
  <div class="search-result-content">
    <div v-for="(doc, index) in data.docs" :key="index">
      <SearchResultItem :data="doc" :mode="mode" />
      <a-divider v-if="index < docSize - 1" />
    </div>
  </div>
</template>

<style scoped lang="scss">
.search-result-content {
  background-color: #ffffff;
  margin-top: 8px;
  padding: 10px;
}
</style>
