<template>
    <ul class="list-unstyled mt-10">
        <li
            v-for="comment in comments"
            :key="comment.id"
            class="mt-8"
        >
            <BoardComment :comment="comment" @submitComment="addComment" />
        </li>
    </ul>
</template>

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

const props = defineProps({
    comments: Array
});

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

const addComment = (replyData) => {
    emit('reply', replyData);
};

// const comments = ref([
//   {
//     id: 1,
//     author: '홍길동',
//     content: '저도 궁금합니다.',
//     children: [
//       {
//         id: 2,
//         author: '사용자1',
//         content: '저도요!',
//       },
//       {
//         id: 3,
//         author: '사용자2',
//         content: '저도..',
//       },
//     ],
//   },
//   {
//     id: 4,
//     author: '사용자4',
//     content: '흥미로운 주제네요.',
//     children: [],
//   },
//   {
//     id: 5,
//     author: '사용자5',
//     content: '우오아아아아아앙',
//     children: [],
//   },
// ]);
</script>
