<template>
    <div class="d-flex align-items-center flex-wrap">
        <div class="d-flex align-items-center">
            <div v-if="!unknown" class="avatar me-2">
                <img src="/img/avatars/2.png" alt="Avatar" class="rounded-circle" />
            </div>
            <div class="me-2">
                <h6 class="mb-0">{{ profileName }}</h6>
                <div class="profile-detail">
                    <span>{{ date }}</span>
                    <template v-if="showDetail">
                        <span class="ms-2">
                            <i class="fa-regular fa-eye"></i> {{ views }}
                        </span>
                        <span>
                            <i class="bx bx-comment"></i> {{ commentNum }}
                        </span>
                    </template>
                </div>
            </div>
        </div>
        <!-- 버튼 영역 -->
        <div class="ms-auto text-end">
            <!-- 수정, 삭제 버튼 -->
            <template v-if="author || showDetail">
                <EditButton @click.stop="editClick" />
                <DeleteButton @click.stop="deleteClick" />
            </template>

            <!-- 좋아요, 싫어요 버튼 (댓글에서만 표시) -->
            <BoardRecommendBtn
                v-if="isLike"
                :boardId="boardId"
                :comment="comment"
                @updateReaction="handleUpdateReaction"
            >
            </BoardRecommendBtn>
        </div>
    </div>
</template>

<script setup>
import { ref, defineProps, defineEmits } from 'vue';
import DeleteButton from '../button/DeleteBtn.vue';
import EditButton from '../button/EditBtn.vue';
import BoardRecommendBtn from '../button/BoardRecommendBtn.vue';

// Props 정의
const props = defineProps({
    comment: {
        type: Object,
        required: true,
    },
    boardId: {
        type: Number,
        required: false
    },
    commentId: {
        type: Number,
        required: false,
    },
    profileName: {
        type: String,
        default: null,
    },
    unknown: {
        type: Boolean,
        default: true,
    },
    showDetail: {
        type: Boolean,
        default: true,
    },
    // 게시글의 작성자 여부를 확인 : 현재 로그인한 사용자가 이 게시글의 작성자인지 여부
    author: {
        type: Boolean,
        default: false,
    },
    date: {
        type: String,
        required: true,
    },
    views: {
        type: Number,
        default: 0,
    },
    commentNum: {
        type: Number,
        default: 0,
    },
    isLike: {
        type: Boolean,
        default: false,
    }
});

const emit = defineEmits(['updateReaction', 'editClick', 'deleteClick']);

// 수정
const editClick = () => {
    emit('editClick', props.unknown);
};

// 삭제
const deleteClick = () => {
    emit('deleteClick', props.unknown);
};

const handleUpdateReaction = (reactionData) => {
    emit("updateReaction", {
        boardId: props.boardId,
        commentId:  props.comment?.commentId,
        ...reactionData,
    });
};


</script>

<style scoped>
.profile-detail span ~ span {
    margin-left: 5px;
}

.ms-auto button + button {
    margin-left: 5px;
}

.btn.author {
    height: 30px;
}

@media screen and (max-width: 450px) {
    .btn-area {
        margin-top: 10px;
        width: 100%;
    }

    .btn.author {
        height: 30px;
    }
}
</style>
