<template>
  <div
    class="bg-white rounded-[24px] overflow-hidden w-full border border-[rgba(226,232,240,0.72)] shadow-[0_12px_30px_rgba(15,23,42,0.05)] box-border">
    <div class="relative">
      <img class="block w-full h-[248px]" :src="data.image" />
      <div
        class="absolute left-4 bottom-4 flex items-center text-white text-[12px] font-bold h-[34px] px-3 rounded-[8px] bg-[rgba(15,23,42,0.72)] leading-[34px]">
        <span class="mr-[6px] text-[15px] leading-[15px]">{{ badge.icon }}</span>
        <span>{{ badge.text }}</span>
      </div>
    </div>

    <div class="flex items-center min-h-[96px] pt-5 px-[26px] pb-[22px] box-border">
      <div class="flex-1 min-w-0">
        <div class="text-[#1e293b] text-[18px] font-bold truncate leading-6">
          {{ data.title }}
        </div>
        <div class="mt-[6px] text-[#94A3B8] text-[14px] font-bold truncate leading-[18px]">
          {{ data.distance }}
        </div>
      </div>
      <div
        class="flex items-center justify-center bg-0F172A text-white text-[18px] font-bold w-[108px] h-[58px] ml-[18px] rounded-[16px] active:opacity-[0.86]"
        :class="{ 'opacity-[0.55]': disabled }" @click="handleAction">
        <span class="mr-2 text-[19px] leading-[19px]">{{ action.icon }}</span>
        <span>{{ action.text }}</span>
      </div>
    </div>
  </div>
</template>

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

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

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

const badge = computed(() => props.data.badge || {});
const action = computed(() => props.data.action || {});

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