<template>
  <div class="h-[272px] bg-[#0f172a] relative rounded-[24px] overflow-hidden w-full"
    :class="{ 'is-disabled': disabled }" @click="handleAction">
    <img class="block w-full" :src="data.cover" />
    <div class="absolute inset-0 bg-[#0f172a]/38"></div>

    <div
      class="absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 w-[76px] h-[76px] border border-white/50 bg-white/30 flex items-center justify-center rounded-full">
      <div
        class="w-0 h-0 ml-[6px] border-t-[17px] border-t-transparent border-b-[17px] border-b-transparent border-l-[23px] border-l-white">
      </div>
    </div>

    <div
      class="absolute inset-x-0 bottom-[72px] text-center leading-[22px] tracking-normal [text-shadow:0_2px_8px_rgba(0,0,0,0.32)] text-white text-[16px] font-bold">
      {{ data.title }}
    </div>
  </div>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue'

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

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

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