<template>
  <view class="result-preview" :style="{ '--result-accent': result.accent }">
    <video
      v-if="result.mediaType === 'video'"
      class="result-preview-image"
      :src="result.videoResultUrl"
      :poster="result.imageResultUrl"
      controls
      object-fit="cover"
    />
    <image v-else class="result-preview-image" :src="result.imageResultUrl" mode="aspectFill" />
    <view class="result-preview-shade" />

    <view class="result-preview-caption">
      <text class="result-preview-badge">{{ result.variantLabel }}</text>
      <text class="result-preview-title">{{ result.title }}</text>
      <text class="result-preview-desc">{{ result.desc }}</text>
    </view>
  </view>
</template>

<script setup>
defineProps({
  result: {
    type: Object,
    default: () => ({}),
  },
});
</script>

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