<template>
  <img
    :id="id"
    :src="src"
    :srcset="srcSet"
    :sizes="rSizes"
    :alt="alt"
    :class="classes"
  />
</template>

<script>
export default {
  name: 'ResponsiveImg',
  props: {
    src: {
      default: '',
      required: true,
      type: String
    },
    pxWidths: {
      default: () => {
        return [1920, 1600, 1366, 1024, 768, 640]
      },
      required: false,
      type: Array
    },
    alt: {
      default: '',
      required: false,
      type: String
    },
    rSizes: {
      default: '100vw',
      required: false,
      type: String
    },
    id: {
      default: '',
      required: false,
      type: String
    },
    classes: {
      default: '',
      required: false,
      type: String
    }
  },
  computed: {
    srcSet() {
      return this.pxWidths.reduce((setStr, width) => {
        return setStr += this.src+'?w='+width+' '+width+'w, '
      }, '')
    }
  }
}
</script>