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

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

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 = getResolvedHost(`${rootPath}${props.src}`)
    return { pc: resolved, mo: '' }
  }

  return {
    pc: props.src.pc ? getResolvedHost(`${rootPath}${props.src.pc}`) : '',
    mo: props.src.mo ? getResolvedHost(`${rootPath}${props.src.mo}`) : '',
  }
})
</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>
