<template v-if="isRecommend">
    <button class="btn btn-label-primary btn-icon" :class="likeClicked ? 'clicked' : '', bigBtn ? 'big' : '' ">
        <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' : '', bigBtn ? 'big' : '' ">
        <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,
    },
    bigBtn : {
        type :Boolean,
        default : false,
    },
    isRecommend: {
        type:Boolean,
        default:true,
    }
});
</script>

<style scoped>
.btn + .btn {
    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;
}

.btn {
    width: 55px;
    height: 30px;
}

.btn.big {
    width: 70px;
    height: 70px;
    font-size: 18px;
}

@media screen and  (max-width:450px) {
    .btn {
        width: 50px;
        height: 20px;
        font-size: 12px;
    }
}
</style>