<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">
    <img class="block w-full h-[184px]" :src="data.image" />

    <div class="px-24 pb-24 pt-7 box-border">
      <div class="flex items-center min-w-0">
        <div
          class="color-2563EB bg-EFF6FF text-[12px] font-bold h-[30px] mr-3 px-3 border border-[#bfdbfe] rounded-[10px] leading-[30px] whitespace-nowrap box-border">
          {{ type.text }}
        </div>
        <div class="text-[#1e293b] text-[18px] font-bold truncate min-w-0 leading-6">
          {{ data.title }}
        </div>
      </div>

      <div class="mt-2 flex items-center text-[#94A3B8] text-[14px] font-bold leading-[18px]">
        <span class="mr-[5px] text-[15px] leading-[15px]">{{ distance.icon }}</span>
        <span>{{ distance.text }}</span>
      </div>

      <div class="mt-6 px-5 py-[18px] box-border bg-[#f8fafc] rounded-[20px]">
        <div class="flex items-center text-[#64748B] text-[13px] font-bold leading-[18px]">
          <span class="mr-2 text-[#ec4899] text-[14px] leading-[14px]">{{ location.icon }}</span>
          <span>{{ location.label }}</span>
        </div>
        <div class="mt-3 text-[#1e293b] text-[16px] font-bold leading-[22px]">
          {{ location.text }}
        </div>
      </div>

      <div
        class="mt-5 flex items-center justify-center bg-0F172A text-white text-[18px] font-bold h-[54px] 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 } from "vue";

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

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

const type = computed(() => props.data.type || {});
const distance = computed(() => props.data.distance || {});
const location = computed(() => props.data.location || {});
const action = computed(() => props.data.action || {});

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