<template>
  <div class="hot-search-widget">
    <div class="tabs">
      <span v-for="tab in data.tabs" :key="tab" class="tab active">{{ tab }}</span>
    </div>
    <ul class="list">
      <li v-for="(item, index) in data.items" :key="index">
        <span>{{ index + 1 }}</span>
        <span class="title">{{ item.title }}</span>
      </li>
    </ul>
  </div>
</template>

<script setup lang="ts">
const props = defineProps<{
  data: {
    tabs: string[];
    items: { title: string; value: string }[];
  }
}>();
</script>

<style lang="scss" scoped>
@import '@/styles/tokens.scss';
.hot-search-widget {
  height: 100%;
}
.tabs {
  display: flex;
  gap: 12px;
  margin-bottom: 8px;
  .tab {
    font-size: 13px;
    color: $color-text-secondary;
    &.active {
      color: $color-text-primary;
      font-weight: bold;
    }
  }
}
.list {
  list-style: none;
  font-size: 13px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  li {
    display: flex;
    align-items: center;
    .title {
      margin-left: 8px;
    }
  }
}
</style>
