<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 { defineProps, defineEmits } from 'vue';
import BoardComment from './BoardComment.vue'

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

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

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

</script>
