<template>
  <div class="h-[324px] bg-[#e2e8f0] relative rounded-[24px] overflow-hidden w-full active:opacity-86"
    :class="{ 'opacity-55': disabled }" @click="handleSelect">
    <img class="h-full block w-full" :src="data.image" />

    <div
      class="absolute top-4 right-4 z-10 w-10 h-10 bg-slate-900/35 leading-10 flex items-center justify-center rounded-full text-white text-[18px] font-bold active:opacity-86"
      @click.stop="handleAction">
      {{ action.icon }}
    </div>

    <div v-if="hasCaption"
      class="absolute left-0 right-0 bottom-0 pt-[72px] px-[22px] pb-5 bg-gradient-to-b from-slate-900/0 to-slate-900/72">
      <div v-if="caption.title"
        class="leading-[24px] [text-shadow:0_2px_8px_rgba(0,0,0,0.28)] text-white text-[18px] font-bold truncate">
        {{ caption.title }}
      </div>
      <div v-if="caption.subtitle"
        class="mt-1 leading-[18px] [text-shadow:0_2px_8px_rgba(0,0,0,0.28)] text-white text-[14px] font-bold truncate">
        {{ caption.subtitle }}
      </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(["select", "action"]);

const caption = computed(() => props.data.caption || {});
const action = computed(() => props.data.action || {});
const hasCaption = computed(() => Boolean(caption.value.title || caption.value.subtitle));

const handleSelect = () => {
  if (props.disabled) return;
  emit("select", props.data);
};

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