<template>
    <div class="d-flex align-items-center flex-wrap">
        <div class="d-flex align-items-center">
            <div class="avatar me-2" v-if="unknown">
                <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> {{ comments }}
                        </span>
                    </template>
                </div>
            </div>
        </div>
        <div class="ms-auto btn-area">
            <template v-if="showDetail">
                <EditButton @click="handleEdit" />
                <DeleteButton @click="handleDelete" />
            </template>
            <template v-else>
                <template v-if="author">
                    <EditButton />
                    <DeleteButton />
                    <!-- <button class="btn author btn-label-primary btn-icon" @click="handleEdit">
                        <i class='bx bx-edit-alt'></i>
                    </button>
                    <button class="btn author btn-label-primary btn-icon" @click="handleDelete">
                        <i class='bx bx-trash'></i>
                    </button> -->
                </template>
                <BoardRecommendBtn v-if="!isChild" :isRecommend="false" />
            </template>
        </div>
    </div>
</template>

<script setup>
import { computed, defineProps } from 'vue';
import { useRouter } from 'vue-router';
import axios from '@api';
import DeleteButton from '../button/DeleteBtn.vue';
import EditButton from '../button/EditBtn.vue';
import BoardRecommendBtn from '../button/BoardRecommendBtn.vue';

// Vue Router 인스턴스
const router = useRouter();

// Props 정의
const props = defineProps({
    profileName: {
        type: String,
        default: '익명',
    },
    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,
    },
    comments: {
        type: Number,
        default: 0,
    },
    isChild: {
        type: Boolean,
        default: false,
    }
});

const boardId = 100; //수정필요!!
// 수정 버튼 핸들러
const handleEdit = () => {
    router.push({ name: 'BoardEdit', params: { id: boardId } });
};

// 삭제 버튼 핸들러
const handleDelete = async () => {
    if (confirm('정말 이 게시물을 삭제하시겠습니까?')) {
        try {
            await axios.delete(`board/${boardId}`);
            alert('게시물이 성공적으로 삭제되었습니다.');
            router.push({ name: 'BoardList' });
        } catch (error) {
            console.error('게시물 삭제 중 오류 발생:', error);
            alert('게시물 삭제에 실패했습니다.');
        }
    }
};

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