<template>
  <view class="recommendation-list-card w-full">
    <scroll-view class="recommendation-list-card__scroll scroll-x whitespace-nowrap w-full" scroll-x
      :show-scrollbar="false" enhanced>
      <view v-for="item in items" :key="item.id || item.title"
        class="recommendation-list-card__item inline-block bg-white rounded-[20px] overflow-hidden"
        :class="{ 'is-disabled': disabled }" @click="handleSelect(item)">
        <image class="recommendation-list-card__image block w-full" :src="item.image" mode="aspectFill" />
        <view class="recommendation-list-card__body p-[16px]">
          <view class="recommendation-list-card__name text-[#1e293b] font-size-18 font-900 ellipsis-1">
            {{ item.title }}
          </view>
          <view
            class="recommendation-list-card__distance flex flex-items-center  gap-[4px] mt-[4px] text-[#94a3b8] font-size-12 font-800">
            <text class="recommendation-list-card__pin">⌖</text>
            <text>{{ item.distance }}</text>
          </view>
          <view
            class="recommendation-list-card__button flex flex-items-center flex-justify-center mt-[12px] text-[#334155] font-size-12 font-900"
            @click.stop="handleSelect(item)">
            {{ getActionText(item) }}
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

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

const props = defineProps({
  data: {
    type: Object,
    default: () => ({}),
  },
  disabled: {
    type: Boolean,
    default: false,
  },
});

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

const items = computed(() => props.data.items || []);

const getActionText = (item) => {
  return (item.action && item.action.text) || "";
};

const handleSelect = (item) => {
  if (props.disabled) return;
  emit("select", item);
};
</script>

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