<script setup lang="ts">
interface Props {
  src: string | { pc?: string; mo?: string }
  alt?: string
  imageType?: 'public' | 'cdn'
  priority?: 'high' | 'low' | 'auto'
}

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

const isResponsiveMode = computed(() => {
  return typeof props.src === 'object' && !!props.src.pc && !!props.src.mo
})

const imagePaths = computed(() => {
  if (typeof props.src === 'string') {
    const resolved = formatPathHost(props.src, {
      imageType: props.imageType,
    })
    return { pc: '', mo: resolved }
  }

  return {
    pc: props.src.pc
      ? formatPathHost(props.src.pc, {
          imageType: props.imageType,
        })
      : '',
    mo: props.src.mo
      ? formatPathHost(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.mo"
      :alt="alt"
      v-bind="$attrs"
      :loading="priority === 'high' ? 'eager' : 'lazy'"
      decoding="async"
      :fetchpriority="priority"
    />
  </picture>

  <img
    v-else
    :src="imagePaths.mo"
    :alt="alt"
    v-bind="$attrs"
    :loading="priority === 'high' ? 'eager' : 'lazy'"
    decoding="async"
    :fetchpriority="priority"
  />
</template>
