<template>
  <div class="gradient-image" :style="'width:' + width + 'rem; height: ' + height + 'rem; border-radius: ' + radius + 'px; background:' + (url ? 'url(' + url + ')' : gradient)">
  </div>
</template>
<script>
export default {
  props: {
    url: {
      type: String,
      default: ''
    },
    radius: {
      type: Number,
      default: 12
    },
    width: {
      type: Number,
      default: 3
    },
    height: {
      type: Number,
      default: 3
    }
  },
  computed: {
    gradient () {
      const randNum = Math.floor(Math.random() * 9)
      const gradients = [
        'linear-gradient(315deg, #fad0c4 0%, #f1a7f1 74%)',
        'linear-gradient(315deg, #d5adc8 0%, #ff8489 74%)',
        'linear-gradient(315deg, #f8ceec 0%, #a88beb 74%)',
        'linear-gradient(315deg, #ffac81 0%, #ff928b 74%)',
        'linear-gradient(315deg, #f9c1b1 0%, #fb8085 74%)',
        'linear-gradient(315deg, #f39f86 0%, #f9d976 74%)',
        'linear-gradient(315deg, #ee8c68 0%, #eb6b9d 74%)',
        'linear-gradient(315deg, #96c8fb 0%, #ddbdfc 74%)',
        'linear-gradient(315deg, #f06543 0%, #ffbe3d 74%)',
        'linear-gradient(315deg, #fea684 0%, #feb9a3 74%)'
      ]

      return gradients[randNum]
    }
  }
}
</script>

<style src="./gradient-image.scss" lang="scss"></style>
