<template>
    <li class="mt-5 card p-5">
        <div class="d-flex align-items-center">
            <div class="w-100 d-flex align-items-center">
                <span class="btn btn-primary">{{ item.category }}</span>
                <strong class="mx-2 w-75">{{ item.WRDDICTTL }}</strong>
            </div>
            <EditBtn />
        </div>
        <p class="mt-5" v-html="$common.contentToHtml(item.WRDDICCON)"></p>
        <div class="d-flex justify-content-between flex-wrap gap-2 mb-2">
            <div class="d-flex flex-wrap align-items-center mb-50">
                <div class="avatar avatar-sm me-2">
                    <img :src="getProfileImage(item.author.profileImage)" alt="최초 작성자" class="rounded-circle">
                </div>
                <div>
                    <p class="mb-0 small fw-medium">{{ formatDate(item.author.createdAt) }}</p>
                </div>
            </div>
        </div>
        <div class="d-flex justify-content-between flex-wrap gap-2 mb-2">
            <div class="d-flex flex-wrap align-items-center mb-50">
                <div class="avatar avatar-sm me-2">
                    <img :src="getProfileImage(item.lastEditor.profileImage)" alt="최근 작성자" class="rounded-circle">
                </div>
                <div>
                    <p class="mb-0 small fw-medium">{{ formatDate(item.lastEditor.updatedAt) }}</p>
                </div>
            </div>
        </div>
    </li>
</template>

<script setup>
import EditBtn from '@/components/button/EditBtn.vue';

  // Props
defineProps({
    item: {
        type: Object,
        required: true,
    },
});

// 날짜
const formatDate = (dateString) => new Date(dateString).toLocaleString();
// 이미지
const getProfileImage = (imagePath) =>
imagePath ? `/img/avatars/${imagePath}` : '/img/avatars/default-Profile.jpg';
</script>