<template>
    <img :src="brandImage" class="card-brand-image" alt="Bandeira do cartão" />

</template>



<script setup>

import { computed } from 'vue';
import visa from 'src/assets/cards/visa.svg';
import mastercard from 'src/assets/cards/mastercard.svg';
import elo from 'src/assets/cards/elo.svg';
import hipercard from 'src/assets/cards/hipercard.svg';
import diners from 'src/assets/cards/diners.svg';
import discover from 'src/assets/cards/discover.svg';

const props = defineProps({
    brand:
    {
        type: String,
        default: '',
    },
});

const brandImage = computed(() => {
    const brands = {
        visa,
        mastercard,
        elo,
        hipercard,
        diners,
        discover,
    };
    return brands[props.brand?.toLowerCase()] || visa;
});
</script>

<style scoped lang="scss">
.card-brand-image {
    width: 42px;
    height: auto;
    object-fit: contain;
    display: block;
}
</style>