<template>
  <div class="px-20">
    <HomeSectionHeader
      title="热门项目"
      subTitle="Popular projects"
      more-to-url="/travel-projects"
    />
    <div
      class="w-full bg-[url('~/assets/img/home/home_hot_projects_bg.png')] bg-no-repeat bg-bottom bg-cover pb-30 rounded-xl overflow-hidden"
    >
      <div class="text-white pl-50 pt-20">
        <div class="text-base">梦想旅行，触手可及</div>
        <div class="text-sm mt-3">Dream travel, within reach</div>
      </div>
      <div class="flex overflow-scroll mt-20 scrollbar">
        <HomeHotTravelProjectsItem
          v-for="item in travelProjectList"
          :key="item"
          :item-data="item"
          class="ml-15"
        />
        <NuxtLink
          to="/travel-projects"
          class="border w-240 mx-15 shrink-0 border-[#DFE0E4] rounded-xl bg-[#0B5C4D99] flex flex-col items-center justify-center text-xl text-white"
        >
          <span
            class="iconfont icon-arrow_right"
            style="font-size: 20px"
          ></span>
          <span>了解更多</span>
        </NuxtLink>
      </div>
    </div>
  </div>
</template>

<script setup>
const { data } = await useMyFetch(
  `website/tourism/project/list?isHotspot=1&pageNum=1&pageSize=10`
);
const travelProjectList = computed(() => data.value?.dataList ?? []);
</script>

<style lang="scss" scoped>
.scrollbar::-webkit-scrollbar {
  width: 0px;
  height: 0px;
  background-color: #ccc;
}
</style>
