<template v-if="isRecommend">
    <button class="btn btn-label-primary btn-icon" :class="{'clicked': likeClicked, 'big': bigBtn}" @click="handleLike">
        <i class="fa-regular fa-thumbs-up"></i> <span class="num">{{ likeCount }}</span>
    </button>
    <button class="btn btn-label-danger btn-icon" :class="{'clicked': dislikeClicked, 'big': bigBtn}" @click="handleDislike">
        <i class="fa-regular fa-thumbs-down"></i> <span class="num">{{ dislikeCount }}</span>
    </button>
</template>

<script setup>
import { ref, computed } from 'vue';

const props = defineProps({
    comment: {
        type: Object,
        required: true,
    },
    likeClicked : {
        type : Boolean,
        default : false,
    },
    dislikeClicked : {
        type : Boolean,
        default : false,
    },
    bigBtn : {
        type :Boolean,
        default : false,
    },
    isRecommend: {
        type:Boolean,
        default:true,
    },
    boardId: {
        type: Number,
        required: true,
    },
    commentId: {
        type: Number,
        default: null,
    },
    likeCount: {
        type: Number,
        default: 0,
    },
    dislikeCount: {
        type: Number,
        default: 0,
    },
});

const emit = defineEmits(['updateReaction']);

const likeClicked = ref(props.likeClicked);
const dislikeClicked = ref(props.dislikeClicked);
const likeCount = computed(() => props.comment?.likeCount ?? props.likeCount);
const dislikeCount = computed(() => props.comment?.dislikeCount ?? props.dislikeCount);

const handleLike = () => {
    const isLike = !likeClicked.value;
    const isDislike = false; 

    emit('updateReaction', { boardId: props.boardId, commentId: props.commentId, isLike, isDislike });
    likeClicked.value = isLike;
    dislikeClicked.value = false;
};

const handleDislike = () => {
    const isDislike = !dislikeClicked.value;
    const isLike = false;

    emit('updateReaction', { boardId: props.boardId, commentId: props.commentId, isLike, isDislike });
    dislikeClicked.value = isDislike;
    likeClicked.value = false;
};

</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>
