<template>
    <div>
        <ol dir="rtl" class="relative border-s border-cyen-200 dark:border-cyen-700 m-4">
            <li v-for="comment in comments.data" :key="comment.id">
                <UserComment :instance="comment" />
            </li>
        </ol>
        <!-- fold button -->
        <button v-if="comments.next" type="button" @click="getComments()"
            class=" text-cyen-950 dark:text-white animate-bounce w-full">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                stroke="currentColor" class="size-6  mx-auto">
                <path stroke-linecap="round" stroke-linejoin="round"
                    d="m4.5 5.25 7.5 7.5 7.5-7.5m-15 6 7.5 7.5 7.5-7.5" />
            </svg>
        </button>
    </div>
</template>

<script setup>
import axios from 'axios';

const comments = reactive({
    next: useRuntimeConfig().public.BaseUrl + 'maghale/my_comments/',
    data: [],
})

getComments()

async function getComments() {
    await axios
        .get(comments.next)
        .then((r) => {
            comments.data = comments.data.concat(r.data.results)
            comments.next = r.data.next
        })
}
</script>