<template>
  <!-- eslint-disable -->
  <svg :height="height" data-name="credit card" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 915.69 679.28"><defs><linearGradient x1="549.23" y1="734.77" x2="549.23" y2="126.57" gradientTransform="matrix(0.97, 0.31, -0.3, 0.99, 144.2, -171.29)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="gray" stop-opacity="0.25"/><stop offset="0.54" stop-color="gray" stop-opacity="0.12"/><stop offset="1" stop-color="gray" stop-opacity="0.1"/></linearGradient><linearGradient x1="549.32" y1="679.28" x2="549.32" y2="233.84" gradientTransform="matrix(1, 0, 0, 1, 0, 0)" xlink:href="#fc905628-b5a5-44d2-a4d3-c3e7b0ae88f3"/><linearGradient x1="888.78" y1="569.3" x2="888.78" y2="526.2" gradientUnits="userSpaceOnUse"><stop offset="0" stop-opacity="0.12"/><stop offset="0.55" stop-opacity="0.09"/><stop offset="1" stop-opacity="0.02"/></linearGradient><linearGradient x1="888.78" y1="646.14" x2="888.78" y2="603.03" xlink:href="#179a080d-7ec3-4ffe-a5de-62706a541b28"/><linearGradient x1="741.39" y1="487.05" x2="741.39" y2="464.56" xlink:href="#179a080d-7ec3-4ffe-a5de-62706a541b28"/><linearGradient x1="949.9" y1="646.14" x2="949.9" y2="603.03" xlink:href="#179a080d-7ec3-4ffe-a5de-62706a541b28"/><linearGradient x1="949.9" y1="569.3" x2="949.9" y2="526.2" xlink:href="#179a080d-7ec3-4ffe-a5de-62706a541b28"/><linearGradient x1="812.99" y1="487.05" x2="812.99" y2="464.56" xlink:href="#179a080d-7ec3-4ffe-a5de-62706a541b28"/></defs><title>credit card</title><rect x="184.86" y="201.53" width="728.62" height="445" rx="27.5" ry="27.5" transform="translate(-243.25 71.69) rotate(-17.26)" fill="url(#fc905628-b5a5-44d2-a4d3-c3e7b0ae88f3)"/><rect x="193.72" y="205.56" width="713.76" height="429.25" rx="27.5" ry="27.5" transform="translate(-242.04 71.94) rotate(-17.26)" fill="#fff"/><rect x="155.95" y="267.86" width="713.76" height="61.56" transform="translate(-207.68 55.26) rotate(-17.26)" :fill="primaryColor"/><rect x="303.67" y="610.49" width="181.35" height="26.62" transform="translate(-309.5 34.75) rotate(-17.26)" fill="#bdbdbd"/><rect x="287.34" y="547.84" width="314.45" height="26.62" transform="translate(-288.65 46.83) rotate(-17.26)" fill="#e0e0e0"/><rect x="182.96" y="233.84" width="732.73" height="445.44" rx="27.5" ry="27.5" fill="url(#c95e1ae4-289c-4d69-a4b2-d524402207e9)"/><rect x="191.28" y="238.38" width="713.76" height="429.25" rx="27.5" ry="27.5" fill="#fff"/><rect x="247.01" y="305.76" width="20.8" height="59.06" fill="#e0e0e0"/><rect x="273.63" y="305.76" width="20.8" height="59.06" fill="#e0e0e0"/><rect x="300.25" y="305.76" width="20.8" height="59.06" fill="#e0e0e0"/><rect x="346.84" y="305.76" width="20.8" height="59.06" fill="#e0e0e0"/><rect x="373.46" y="305.76" width="20.8" height="59.06" fill="#e0e0e0"/><rect x="400.08" y="305.76" width="20.8" height="59.06" fill="#e0e0e0"/><rect x="446.66" y="305.76" width="20.8" height="59.06" fill="#e0e0e0"/><rect x="473.29" y="305.76" width="20.8" height="59.06" fill="#e0e0e0"/><rect x="499.91" y="305.76" width="20.8" height="59.06" fill="#e0e0e0"/><rect x="546.49" y="305.76" width="20.8" height="59.06" fill="#e0e0e0"/><rect x="573.11" y="305.76" width="20.8" height="59.06" fill="#e0e0e0"/><rect x="599.73" y="305.76" width="20.8" height="59.06" fill="#e0e0e0"/><rect x="247.01" y="603.57" width="181.35" height="26.62" fill="#bdbdbd"/><rect x="247.01" y="558.65" width="314.45" height="26.62" fill="#e0e0e0"/><path d="M906.25,568.21a4.38,4.38,0,0,1,4.22-4.53h6.26V526.2H860.84v43.1h45.4Z" transform="translate(-142.16 -110.36)" fill="url(#179a080d-7ec3-4ffe-a5de-62706a541b28)"/><path d="M910.47,608.66a4.38,4.38,0,0,1-4.22-4.53V603h-45.4v43.1h55.88V608.66Z" transform="translate(-142.16 -110.36)" fill="url(#70237d60-1aff-4f66-bd15-fe7ff4f620b4)"/><rect x="718.69" y="464.56" width="45.4" height="22.49" fill="url(#23a7cc45-3634-41c8-b854-b6dad7f03557)"/><path d="M932.44,604.13a4.38,4.38,0,0,1-4.22,4.53H922v37.48h55.88V603h-45.4Z" transform="translate(-142.16 -110.36)" fill="url(#8b580cf0-29ea-4363-9065-3a98b2499819)"/><path d="M922,526.2v37.48h6.26a4.38,4.38,0,0,1,4.22,4.53v1.09h45.4V526.2Z" transform="translate(-142.16 -110.36)" fill="url(#64ac1773-8f45-4df6-a418-07dc494bdcee)"/><rect x="790.28" y="464.56" width="45.4" height="22.49" fill="url(#4722d46c-9d1d-46a6-8fd6-e88ecc3eaff1)"/><path d="M906.44,568.63a4,4,0,0,1,4-4h6V531.34h-53.3V569.6h43.31Z" transform="translate(-142.16 -110.36)" :fill="primaryColor"/><path d="M910.46,604.54a4,4,0,0,1-4-4v-1H863.13v38.27h53.3V604.54Z" transform="translate(-142.16 -110.36)" :fill="primaryColor"/><rect x="720.97" y="464.23" width="43.31" height="19.97" :fill="primaryColor"/><path d="M931.42,600.52a4,4,0,0,1-4,4h-6v33.28h53.3V599.55H931.42Z" transform="translate(-142.16 -110.36)" :fill="primaryColor"/><path d="M921.43,531.34v33.28h6a4,4,0,0,1,4,4v1h43.31V531.34Z" transform="translate(-142.16 -110.36)" :fill="primaryColor"/><rect x="789.27" y="464.23" width="43.31" height="19.97" :fill="primaryColor"/></svg>
  <!-- eslint-enable -->
</template>

<script>
export default {
  name: 'UndrawCreditCard',
  props: {
    /** Sets primaryColor of the illustration */
    primaryColor: {
      type: String,
      default: '#6c63ff'  
    },
    /** Sets height of the illustration */
    height: {
      type: String,
      default: '100'  
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
