<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">
            <button class="btn btn-label-primary btn-icon">
                <i class="fa-regular fa-thumbs-up"></i>
            </button>
            <button class="btn btn-label-primary btn-icon">
                <i class="fa-regular fa-thumbs-down"></i>
            </button>
        </div>
    </div>
</template>

<script setup>
defineProps({
    profileName : {
        type: String,
        required: true,
    },
    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>