<template>
  <view class="explore-cards">
    <scroll-view
      class="explore-scroll"
      scroll-x
      show-scrollbar="false"
    >
      <view class="explore-track">
        <view
          v-for="(item, index) in normalizedList"
          :key="getItemKey(item, index)"
          class="explore-card"
          :class="`is-${item.tone}`"
          hover-class="is-pressed"
          hover-stay-time="80"
          @tap="handleCardTap(item.raw, index)"
        >
          <image
            v-if="item.coverImage"
            class="explore-card-image"
            :src="item.coverImage"
            mode="aspectFill"
          />

          <view class="explore-card-gradient" />

          <view class="explore-card-content">
            <text class="explore-card-tag ellipsis-1">{{ item.tag }}</text>
            <text class="explore-card-title ellipsis-1">{{ item.title }}</text>
            <text v-if="item.subTitle" class="explore-card-desc ellipsis-1">
              {{ item.subTitle }}
            </text>
          </view>

          <view class="explore-card-arrow">
            <text>→</text>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
import { computed } from "vue";

const props = defineProps({
  list: {
    type: Array,
    default: () => [],
  },
});

const emit = defineEmits(["didSelectItem"]);

const FALLBACK_TAGS = ["MUST VISIT", "CULTURE", "ADVENTURE", "NIGHTLIFE"];
const TONES = ["default", "culture", "adventure", "nightlife"];

const normalizedList = computed(() =>
  props.list.map((item, index) => ({
    raw: item,
    id: item.id ?? item.tabContentId,
    title: item.title || "",
    subTitle: item.subTitle || "",
    tag: item.tag || FALLBACK_TAGS[index % FALLBACK_TAGS.length],
    coverImage: item.coverImage || "",
    tone: TONES[index % TONES.length],
  }))
);

const getItemKey = (item, index) => item.id ?? item.title ?? index;

const handleCardTap = (item, index) => {
  emit("didSelectItem", item, index);
};
</script>

<style scoped lang="scss">
@import "./styles/index.scss";
</style>
