<script setup lang="ts">
import type { SearchHistoryRecord } from "@/types/user.types";
import type { PropType } from "vue";
import HistoryItemComp from "./SearchHistoryItem.vue";

defineProps({
  data: {
    type: Array as PropType<SearchHistoryRecord[]>,
    required: true,
  }
});

const emits = defineEmits<{
  (e: "delete", id: number): void;
}>();

function handleDelete(id: number) {
  emits('delete', id);
}
</script>

<template>
  <div class="histories">
    <HistoryItemComp
      v-for="(item, i) in data"
      :data="item"
      :key="i"
      @delete="handleDelete(item.id)"
      class="history-item-comp"
    />
  </div>
</template>

<style scoped lang="scss">
.history-item-comp {
  margin-top: 8px;

  &:first-child {
    margin-top: 0;
  }
}
</style>
