<script setup lang="ts">
import {
  getResponsiveResolvedSrc,
  getResponsiveClass,
} from "#layers/utils/dataUtil";
import type { PageDataComponent } from "#layers/types/api/pageData";

const props = defineProps<{ componentData: PageDataComponent }>();

const assetType = computed(() => {
  return props.componentData?.component_type;
});
const assetPath = computed(() => {
  // [TODO] 이미지 그룹 여러개 처리
  // [TODO] comm 처리
  return props.componentData?.resources[0]["groups"][0]?.img_path?.comm;
});
</script>

<template>
  <div class="absolute inset-0 w-full h-full">
    <!-- 이미지 타입-->
    <div
      v-if="assetType === 'IMG'"
      class="absolute inset-0 w-full h-full bg-cover bg-center bg-no-repeat"
      :class="getResponsiveClass()"
      :style="getResponsiveResolvedSrc(assetPath, 'bg')"
    ></div>

    <!-- 비디오 타입 -->
    <video
      v-else-if="assetType === 'VIDEO'"
      class="absolute inset-0 w-full h-full object-cover"
      :poster="assetPoster"
      autoplay
      muted
      loop
      playsinline
    >
      <source :src="assetPath" type="video/mp4" />
      <source :src="assetPath" type="video/webm" />
    </video>
    <div
      class="absolute inset-0"
      style="
        background: linear-gradient(
          180deg,
          rgba(16, 13, 15, 0) 0%,
          #100d0f 95%
        );
      "
    ></div>
  </div>
</template>
