<template v-if="isRecommend">
    <button class="btn btn-label-primary btn-icon me-1" :class="{ clicked: likeClicked, big: bigBtn }" @click="handleLike">
        <i class="fa-regular fa-thumbs-up"></i> <span class="ms-1">{{ 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="ms-1">{{ dislikeCount }}</span>
    </button>
</template>

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

    const props = defineProps({
        comment: {
            type: Object,
            default: () => ({}),
        },
        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, null],
            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>
