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

interface Props {
  resourcesData: PageDataResourceGroup
  size?: 'contain' | 'cover'
  videoPlay?: boolean
  gradient?: string
  dimmed?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  size: 'cover',
  videoPlay: true,
  gradient: '',
  dimmed: false,
})

const { getCurrentSrc } = useResponsiveSrc()

const resourcesSrc = computed(() => {
  return getCurrentSrc(props.resourcesData)
})
const posterSrc = computed(() => {
  return getCurrentSrc(props.resourcesData, { resourcesType: 'IMG' })
})
const imageClasses = computed(() => [
  `w-full h-full bg-center bg-no-repeat`,
  props.size === 'contain' ? 'bg-contain' : 'bg-cover',
])
const gradientClasses = computed(() => [
  'absolute bottom-[-2px] left-[-2px] right-[-2px]',
  props.gradient,
])
</script>

<template>
  <div
    v-if="resourcesSrc"
    class="overflow-hidden absolute inset-0 w-full h-full"
  >
    <!-- 이미지 타입 -->
    <div
      v-if="isTypeImage(resourcesData?.resource_type)"
      :class="imageClasses"
      :style="{ backgroundImage: `url(${resourcesSrc})` }"
    />

    <!-- 비디오 타입 -->
    <AtomsVideo
      v-else-if="isTypeVideo(resourcesData?.resource_type)"
      :src="resourcesSrc"
      :poster="posterSrc"
      :play="videoPlay"
      class="w-full h-full object-cover"
    />

    <i v-if="dimmed" class="absolute inset-0 bg-black/50" />
    <i v-if="gradient" :class="gradientClasses" />
  </div>
</template>
