<template>
  <div class="grid border-round border-1 border-solid border-700">
    <div class="col-6">
      <InputText v-model="model.question" />
      <br />
      <InputText v-model="model.answer" />
    </div>
    <div class="col-6 flex overflow-x-auto gap-2 p-2">
      <div v-if="photos.length === 0" @click="searchPhotos">
        <i class="mdi mdi-image-search-outline" />
      </div>
      <img v-for="photo of photos" :key="photo.id" :src="photo.url" class="border-round mr-2 flex-shrink-0" />
    </div>
  </div>
</template>

<script setup>
// comment-search-outline

import { ref, defineModel } from 'vue'
import api from '@/js/api'

const photos = ref([])

const model = defineModel()

async function searchPhotos() {
  let { photos: apiPhotos, ratelimit } = await api.photosearch(model.value.question, model.value.answer)
  photos.value = apiPhotos;
}
</script>

<style scoped>
img {
  border: 1px solid gray;
  height: 100px;
  width: 100px;
}
</style>
