<template>
    <hr class="mt-0 mb-6">
    <div class="d-flex justify-content-between align-items-center flex-wrap mb-6 gap-2">
        <!-- 제목 섹션 -->
        <div class="me-1">
            <h5 class="mb-0">{{ boardTitle }}</h5>
        </div>
        <!-- 첨부파일 섹션 -->
        <div v-if="dropdownItems.length > 0" class="btn-group">
            <button type="button" class="btn btn-label-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
                <i class="fa-solid fa-download me-2"></i>
                첨부파일
                (<span class="attachment-num">{{ dropdownItems.length }}</span>)
            </button>
            <ul class="dropdown-menu">
                <li v-for="(item, index) in dropdownItems" :key="index">
                    <a class="dropdown-item" href="javascript:void(0);">
                        {{ item.label }}
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <!-- 컨텐트 섹션 -->
    <div class="d-flex min-250">
        <p class="mb-0">{{ boardContent }}</p>
    </div>
    <!-- 좋아요 섹션 -->
    <div class="text-center">
        <BoardRecommendBtn :bigBtn="true" />
    </div>
</template>

<script setup>
import BoardRecommendBtn from './BoardRecommendBtn.vue';

defineProps({
    boardTitle : {
        type: String,
        required: true,
    },
    boardContent: {
        type: String,
        required: true,
    },
    attachmentCount: {
        type: Number,
        default: 0,
    },
    dropdownItems: {
        type: Array,
        default: () => [],
    },
});

</script>

<style scoped>
    .min-250 {
        min-height: 250px !important;
    }
</style>