<script setup lang="ts">
interface Props {
  src: string | { pc?: string; mo?: string }
  alt?: string
  imageType?: 'common' | 'game'
}

const props = withDefaults(defineProps<Props>(), {
  alt: 'image',
  imageType: 'game',
})

const isDev = process.env.NODE_ENV === 'development'
const rootPath = isDev ? '' : '/templates/brand'

const isResponsiveMode = computed(() => {
  return typeof props.src === 'object' && !!props.src.pc && !!props.src.mo
})
const imagePaths = computed(() => {
  if (typeof props.src === 'string') {
    const resolved = getImageHost(`${rootPath}${props.src}`, {
      imageType: props.imageType,
    })
    return { pc: resolved, mo: '' }
  }

  return {
    pc: props.src.pc
      ? getImageHost(`${rootPath}${props.src.pc}`, {
          imageType: props.imageType,
        })
      : '',
    mo: props.src.mo
      ? getImageHost(`${rootPath}${props.src.mo}`, {
          imageType: props.imageType,
        })
      : '',
  }
})
</script>

<template>
  <picture v-if="isResponsiveMode">
    <source media="(min-width: 1024px)" :srcset="imagePaths.pc" />
    <source media="(max-width: 1023px)" :srcset="imagePaths.mo" />
    <img :src="imagePaths.pc" :alt="alt" v-bind="$attrs" loading="lazy" />
  </picture>

  <img
    v-else
    :src="imagePaths.pc || imagePaths.mo"
    :alt="alt"
    v-bind="$attrs"
    loading="lazy"
  />
</template>
