<template>
    <button class="btn btn-label-primary btn-icon" :class="likeClicked ? 'clicked' : '' ">
        <i class="fa-regular fa-thumbs-up"></i> <span class="num">1</span>
    </button>
    <button class="btn btn-label-danger btn-icon" :class="dislikeClicked ? 'clicked' : '' ">
        <i class="fa-regular fa-thumbs-down"></i> <span class="num">1</span>
    </button>
</template>

<script setup>
defineProps({
    likeClicked : {
        type : Boolean,
        default : false,
    },
    dislikeClicked : {
        type : Boolean,
        default : false,
    }
});
</script>

<style scoped>
.ms-auto button + button {
    margin-left: 5px;
} 

.num {
    margin-left: 5px;
}

.btn-label-danger.clicked {
    background-color: #e6381a;
}

.btn-label-danger.clicked i,
.btn-label-danger.clicked span {
    color: #fff;
}

.btn-label-primary.clicked {
    background-color: #5f61e6;
}

.btn-label-primary.clicked i,
.btn-label-primary.clicked span  {
    color : #fff;
}
</style>