<template>
  <div class="scenic-image-card relative rounded-24 overflow-hidden w-full" :class="{ 'is-disabled': disabled }"
    @click="handleSelect">
    <img class="scenic-image-card__image block w-full" :src="data.image" mode="aspectFill" />

    <div
      class="scenic-image-card__expand flex flex-items-center flex-justify-center rounded-full color-white font-size-18 font-900"
      @click.stop="handleAction">
      {{ action.icon }}
    </div>

    <div v-if="hasCaption" class="scenic-image-card__caption">
      <div v-if="caption.title" class="scenic-image-card__title color-white font-size-18 font-900 ellipsis-1">
        {{ caption.title }}
      </div>
      <div v-if="caption.subtitle" class="scenic-image-card__subtitle color-white text-[14px] font-900 ellipsis-1">
        {{ 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>

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