<script setup>
import WelcomeItem from './WelcomeItem.vue'
import DocumentationIcon from './icons/IconDocumentation.vue'
import ToolingIcon from './icons/IconTooling.vue'
import EcosystemIcon from './icons/IconEcosystem.vue'
import CommunityIcon from './icons/IconCommunity.vue'
import SupportIcon from './icons/IconSupport.vue'
</script>

<template>
  <WelcomeItem>
    <template #icon>
      <DocumentationIcon />
    </template>
    <template #heading>Documentation</template>

    <div class="input-container">
      <input type="text" v-model="inputValue" placeholder="Enter your query" />
      <button @click="handleSubmit">Submit</button>
    </div>

    <div v-if="searchResults">
      <h3>Search Results</h3>
      <ul>
        <li v-for="result in searchResults" :key="result.id">
          <a :href="result.url">{{ result.title }}</a>
        </li>
      </ul>
    </div>
  </WelcomeItem>

</template>

<script>

import axios from 'axios';

export default {
  data() {
    return {
      inputValue: '',
      searchResults: null
    };
  },
  methods: {
    async handleSubmit() {
      try {
        const response = await axios.get(`https://api.example.com/search?q=${this.inputValue}`);
        this.searchResults = response.data.results;
      } catch (error) {
        console.log(error);
      }
    }
  }
};
</script>

<style>
.input-container {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

input[type="text"] {
  padding: 10px;
  border: 2px solid #ccc;
  border-radius: 4px;
  margin-right: 10px;
}

button {
  padding: 10px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #3e8e41;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

li {
  margin-bottom: 10px;
}
</style>

