<template>
  <div class="aigc-photo-card relative rounded-24 overflow-hidden w-full" :class="{ 'is-disabled': disabled }"
    @click="handleAction">
    <img class="aigc-photo-card__image block w-full" :src="data.cover" />
    <div class="aigc-photo-card__shade"></div>

    <div class="aigc-photo-card__play flex flex-items-center flex-justify-center rounded-full">
      <div class="aigc-photo-card__triangle"></div>
    </div>

    <div class="aigc-photo-card__title color-white font-size-16 font-900">
      {{ data.title }}
    </div>
  </div>
</template>

<script setup>
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>

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