<template>
    <div class="relative w-full max-w-lg mx-auto">
      <!-- Search Input -->
      <input
        v-model="query"
        @input="onSearch"
        type="text"
        class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500"
        placeholder="Search students, classes, or anything..."
      />
  
      <!-- Search Icon -->
      <div v-if="query" class="absolute right-4 top-2 text-gray-500 cursor-pointer" @click="clearSearch">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
          class="w-5 h-5"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M6 18L18 6M6 6l12 12"
          />
        </svg>
      </div>
  
      <!-- Search Suggestions (Optional, can be enhanced with data) -->
      <div v-if="results.length > 0 && query" class="absolute mt-2 w-full bg-white border border-gray-300 rounded-lg shadow-md">
        <ul>
          <li
            v-for="result in results"
            :key="result.id"
            class="p-2 cursor-pointer hover:bg-gray-100"
            @click="onSelect(result)"
          >
            {{ result.name }}
          </li>
        </ul>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref } from 'vue'
  
  const query = ref('')
  const results = ref([])
  
  // Dummy data for search suggestions (replace this with API results or store data)
  const allStudents = [
    { id: 1, name: 'John Doe' },
    { id: 2, name: 'Jane Smith' },
    { id: 3, name: 'Robert Johnson' },
    { id: 4, name: 'Emily Davis' }
  ]
  
  const onSearch = () => {
    if (query.value) {
      // Simulate search functionality (replace with API call or real data filtering)
      results.value = allStudents.filter(student =>
        student.name.toLowerCase().includes(query.value.toLowerCase())
      )
    } else {
      results.value = []
    }
  }
  
  const clearSearch = () => {
    query.value = ''
    results.value = []
  }
  
  const onSelect = (result) => {
    // Handle selection (e.g., redirect to student profile or perform other actions)
    console.log('Selected:', result)
  }
  </script>
  
  <style scoped>
  /* Additional styling for the search bar */
  input {
    transition: all 0.3s ease;
  }
  input:focus {
    border-color: #3b82f6;
  }
  </style>
  