<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>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 btn-area">
            <template v-if="showDetail">
                <EditButton />
                <DeleteButton />
            </template>
            <template v-else>
                <template v-if="author">
                    <EditButton />
                    <DeleteButton />
                </template>
                <BoardRecommendBtn :likeClicked="true" :dislikeClicked="false"/>
            </template>
        </div>
    </div>
</template>

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

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


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