<template>
    <div class="d-flex align-items-center">
        <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>2024.12.10 10:46</span>
                    <template v-if="showDetail">
                        <span>
                            <i class="fa-regular fa-eye"></i> 1
                        </span>
                        <span>
                            <i class="fa-regular fa-thumbs-up"></i> 1
                        </span>
                        <span>
                            <i class="fa-regular fa-thumbs-down"></i> 1
                        </span>
                    </template>
                </div>
            </div>
        </div>
        <div class="ms-auto">
            <template v-if="showDetail">
                <button class="btn btn-label-primary btn-icon">
                    <i class='bx bx-edit-alt'></i>
                </button>
                <button class="btn btn-label-primary btn-icon">
                    <i class='bx bx-trash' ></i>
                </button>
            </template>
            <template v-else>
                <BoardRecommendBtn :likeClicked="true" :dislikeClicked="false"/>
            </template>
        </div>
    </div>
</template>

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

defineProps({
    profileName : {
        type: String,
        default: '익명',
    },
    unknown : {
        type: Boolean,
        default: true,
    },
    showDetail : {
        type: Boolean,
        default: true,
    }
});


</script>

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

    .ms-auto button + button {
        margin-left: 5px;
    } 
</style>