<template>
    <div class="mt-4">
        <div v-if="posts.length === 0" class="text-center">
            <p class="text-muted mt-4">게시물이 없습니다.</p>
        </div>
        <div v-for="post in posts" :key="post.id" @click="handleClick(post.id)">
            <BoardCard
                :img="post.img || null"
                :category="post.category || ''"
                :title="post.title"
                :content="post.content"
                :date="post.date"
                :views="post.views || 0"
                v-bind="getBoardCardProps(post)"
                :attachment="post.attachment || false"
                @click="() => goDetail(post.id)"
                />
        </div>
    </div>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue';
import BoardCard from './BoardCard.vue';

const props = defineProps({
    posts: {
        type: Array,
        required: true,
        default: () => [],
    }
});

const emit = defineEmits(['click']);

// 상세 페이지 이동
const goDetail = (id) => {
    emit('click', id);
};

// 없는 데이터는 상위 페이지에서 삭제해도 되게끔 설정
const getBoardCardProps = (post) => {
    const boardCardProps = {};
    if ('likes' in post) {
        boardCardProps.likes = post.likes;
    }
    if ('comments' in post) {
        boardCardProps.comments = post.comments;
    }
    return boardCardProps;
};
</script>

<style>
</style>
