<script setup lang="ts">
import { getResponsiveClass, getResponsiveSrc } from '#layers/utils/dataUtil'
import type { PageDataResourceGroup } from '#layers/types/api/pageData'

const props = defineProps<{
  resourcesData: PageDataResourceGroup
  gradientClass?: string
}>()

const resPath = computed(() => {
  return props.resourcesData?.res_path
})
const bgStyles = computed(() => {
  return getResponsiveSrc(resPath.value, {
    resourcesType: 'bg',
  })
})
const videoSrc = computed(() => {
  return getResponsiveSrc(resPath.value, {
    resourcesType: 'video',
  })
})
const posterSrc = computed(() => {
  return getResponsiveSrc(resPath.value)
})
</script>

<template>
  <div class="absolute inset-0 w-full h-full">
    <!-- 이미지 타입-->
    <div
      v-if="resourcesData?.group_type === 'image'"
      class="w-full h-full bg-cover bg-center bg-no-repeat"
      :class="getResponsiveClass()"
      :style="bgStyles"
    />

    <!-- 비디오 타입 -->
    <template v-else-if="resourcesData?.group_type === 'video'">
      <!-- 모바일 비디오 (sm 미만) -->
      <video
        v-if="videoSrc?.mobileSrc"
        class="w-full h-full object-cover sm:hidden"
        :poster="posterSrc?.mobileSrc"
        autoplay
        muted
        loop
        playsinline
      >
        <source :src="videoSrc.mobileSrc" type="video/mp4" />
        <source :src="videoSrc.mobileSrc" type="video/webm" />
      </video>
      <!-- PC 비디오 (sm 이상) -->
      <video
        v-if="videoSrc?.pcSrc"
        class="w-full h-full object-cover hidden sm:block"
        :poster="posterSrc?.pcSrc"
        autoplay
        muted
        loop
        playsinline
      >
        <source :src="videoSrc.pcSrc" type="video/mp4" />
        <source :src="videoSrc.pcSrc" type="video/webm" />
      </video>
    </template>

    <div class="absolute inset-0" :class="gradientClass" />
  </div>
</template>
