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

interface Props {
  resourcesData: PageDataResourceGroup
  gradient?: string
}

const props = withDefaults(defineProps<Props>(), {
  gradient: '',
})

const breakpoints = useResponsiveBreakpointsReliable()

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)
})
const currentVideoSrc = computed(() => {
  if (!videoSrc.value) return ''
  return breakpoints.value.isMobile
    ? videoSrc.value.mobileSrc
    : videoSrc.value.pcSrc
})
const currentPosterSrc = computed(() => {
  if (!posterSrc.value) return ''
  return breakpoints.value.isMobile
    ? posterSrc.value.mobileSrc
    : posterSrc.value.pcSrc
})
</script>

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

    <!-- 비디오 타입 -->
    <video
      v-else-if="isTypeVideo(resourcesData?.resource_type) && currentVideoSrc"
      class="w-full h-full object-cover"
      :poster="currentPosterSrc"
      autoplay
      muted
      loop
      playsinline
    >
      <source :src="currentVideoSrc" type="video/mp4" />
      <source :src="currentVideoSrc" type="video/webm" />
    </video>

    <!-- 그라디언트 오버레이 (gradient가 true일 때만) -->
    <div
      v-if="props.gradient"
      :class="`absolute bottom-0 left-0 right-0 ${props.gradient}`"
    />
  </div>
</template>
