<template>
    <div
        class="UserPicture"
        :style="{ backgroundImage: `url(${image})` }"
        :class="[ ...modifiersMap ]"
    >
        <svg class="UserPicture_certification" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9.015 12.029"><path data-name="Tracé 3" d="M.01 12.014V4.806v-.172A4.57 4.57 0 014.51 0a4.57 4.57 0 014.5 4.634v7.38l-4.5-2.023-4.5 2.024z" fill="#ffe269"/><path data-name="Tracé 4" d="M9.009 12.014l-4.5-2.02L0 12.029v-1.917l3.209-1.467 1.352-.618 4.448-2.203z" fill="#ffc915"/><path data-name="Tracé 5" d="M0 12.014l4.5-2.02 4.509 2.035v-1.917l-4.56-2.085-4.45-2.2z" fill="#ffbc07" opacity=".408"/></svg>

        <svg class="UserPicture_ambassador" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10.069 16.92"><path data-name="Tracé 27" d="M10.069 5.072A5.035 5.035 0 115.034 0a5.053 5.053 0 015.035 5.072z" fill="#3c9"/><path data-name="Tracé 28" d="M10.069 5.072A5.035 5.035 0 115.034 0a5.053 5.053 0 015.035 5.072z" fill="#3c9"/><path data-name="Tracé 29" d="M5.034 9.206c2.78 0 5.034-1.883 5.034-4.206v11.261c0 .256-.347.4-.594.252l-4.44-2.731-3.254 2c-.738.455-1.78.013-1.78-.755V5c0 2.323 2.254 4.206 5.034 4.206z" fill="rgba(51,204,153,0.68)"/><path data-name="Tracé 30" d="M0 5c0 2.334 2.337 4.227 5.221 4.227v4.6L.6 16.853a.382.382 0 01-.6-.248z" fill="#3c9"/><circle data-name="Ellipse 27" cx="4" cy="4" r="4" transform="translate(1 1)" fill="#333f7f"/></svg>

        <svg class="UserPicture_identity_verified" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12.5234 2.11328C12.3594 2.03906 12.1836 2 12 2C11.8164 2 11.6406 2.03906 11.4766 2.11328L4.12108 5.23438C3.26171 5.59766 2.62108 6.44531 2.62499 7.46875C2.64452 11.3438 4.23827 18.4336 10.9687 21.6562C11.6211 21.9688 12.3789 21.9688 13.0312 21.6562C19.7617 18.4336 21.3555 11.3438 21.375 7.46875C21.3789 6.44531 20.7383 5.59766 19.8789 5.23438L12.5234 2.11328ZM16.4141 10.1641L11.4141 15.1641C11.0469 15.5312 10.4531 15.5312 10.0898 15.1641L7.58983 12.6641C7.22264 12.2969 7.22264 11.7031 7.58983 11.3398C7.95702 10.9766 8.55077 10.9727 8.91405 11.3398L10.75 13.1758L15.0859 8.83594C15.4531 8.46875 16.0469 8.46875 16.4101 8.83594C16.7734 9.20312 16.7773 9.79687 16.4101 10.1602L16.4141 10.1641Z" fill="#33CC99"/></svg>

        <div class="UserPicture_badge" v-bind="badge" v-if="badge">
            <i :class="[
                (badge.style ? badge.style : 'fal'),
                (badge.fa ? `fa-${badge.fa}` : 'fa-star')
            ]"></i>
        </div>

        <i class="UserPicture_guaranted fal fa-shield"></i>
        <i class="UserPicture_verified fal fa-check-circle"></i>
    </div>
</template>

<script>
import { ModifiersMap } from '@studapart/core'
import certification from '../assets/certification-min.svg'
import ambassador from '../assets/ambassador-min.svg'
import identity_verified from '../assets/identity_verified.svg'

export default {
    name: 'UserPicture',
    mixins: [ ModifiersMap ],
    props: {
        image: { type: String, default: "" },
        badge: { type: [Boolean, Object], default: false },
        modifiers: { type: Array, default: () => [] }
    },
    data: () => ({
        assets: { certification, ambassador, identity_verified }
    })
}
</script>