<script setup>
import DestinationCard from '@/components/home/DestinationCard.vue'
import BaseGrid from '@/components/UI/BaseGrid.vue'
import { ref } from 'vue'
import apiClient from '@/services/api-client.js'

const destinations = ref([])
const search = defineModel('search')

function handleSearch() {
  destinations.value = []
  apiClient.get(`/destinations/search/${search.value.value}`)
    .then(result => destinations.value.push(...result.data.data.destinations))
}

</script>

<template>
  <ContentWrapper background>
    <input type="text" class="w-full h-12 mt-4 rounded-xl p-3" placeholder="Search..." ref="search" @keyup.enter="handleSearch">
    <BaseTitle>Search Results</BaseTitle>
    <BaseGrid class="w-full" v-if="destinations">
      <DestinationCard v-for="destination in destinations" :key=destination.id :destination="destination"/>
    </BaseGrid>
  </ContentWrapper>
</template>

<style scoped>

</style>