1 - Setting Up the UI

import { useState } from "react";

export const Search = () => {
  const [query, setQuery] = useState("");

  const handleSearch = () => {
    if (query.trim()) {
      console.log("Search triggered with query:", query.trim());
    }
  };

  return (
    <div>
      <h1>Search API - React Example</h1>
      <div>
        <input
          type="text"
          value={query}
          onChange={(e) => setQuery(e.target.value)}
          placeholder="Enter your query..."
        />
        <button onClick={handleSearch}>Search</button>
      </div>

      <div>
        <h2>Top Questions</h2>
        <p>Top Questions will appear here...</p>
      </div>

      <div>
        <h2>Suggestions</h2>
        <p>Suggestions will appear here...</p>
      </div>

      <div>
        <h2>Summary</h2>
        <p>Summary will appear here...</p>
      </div>

      <div>
        <h2>Search Results</h2>
        <p>Search results will appear here...</p>
      </div>
    </div>
  );
};