<script setup>
import BaseGrid from "@/components/UI/BaseGrid.vue";
import DestinationCard from "@/components/home/DestinationCard.vue";

import apiClient from '../services/api-client.js'
import { onMounted, ref } from 'vue'
import PostCard from '@/components/home/PostCard.vue'

const destinations = ref([])
const posts = ref([])

onMounted(async () => {
  await apiClient.get('/destinations')
    .then(res => destinations.value.push(...res.data.data.slice(Math.max(res.data.data.length - 3, 0))))

  await apiClient.get('/posts')
    .then(res => posts.value.push(...res.data.data.posts))
})
</script>

<template>
  <ContentWrapper background>
      <BaseTitle>Newest Destinations</BaseTitle>
      <BaseGrid class="w-full" v-if="destinations">
        <DestinationCard v-for="destination in destinations" :key=destination.id :destination="destination"/>
      </BaseGrid>
      <BaseTitle>User Stories</BaseTitle>
      <BaseGrid class="w-full mb-12">
        <PostCard v-for="post in posts" :key="post.id" :post="post"/>
      </BaseGrid>
  </ContentWrapper>
</template>
