import Link from "next/link";
import React, { useState } from "react";
import { SyncLoader } from "react-spinners";

interface SuggestionTypes {
  showSuggestion: boolean;
  query: any;
  queryRes: any;
  isLoading: boolean;
  setshowSuggestion: any;
}

function SuggestionsComp({
  showSuggestion,
  query,
  queryRes,
  isLoading,
  setshowSuggestion,
}: SuggestionTypes) {
  const [ss, setss] = useState(true);
  return (
    <div
      className={`suggestions relative w-full sm:w-[500px] md:w-[600px] lg:w-[750px] ${
        showSuggestion ? "block" : "hidden"
      }`}
    >
      <ul className="w-full z-10 absolute rounded-md h-96 overflow-auto">
        {isLoading && (
          <div className="text-center">
            <SyncLoader color="green" size={5} />
          </div>
        )}
        <Link
          onClick={() => {
            //   setss(false);
            //   queryRes = [];
            setshowSuggestion(false);
          }}
          href={`/search?query=${query}`}
        >
          <li
            onClick={() => {
              //   setss(false);
              //   queryRes = [];
              setshowSuggestion(false);
            }}
            className="z-10 bg-white font-normal shadow-xl text-gray-700 py-3 drop-shadow-md pl-2 cursor-pointer hover:bg-gray-200 "
          >
            {query}
          </li>
        </Link>
        {queryRes.length > 0
          ? queryRes?.map((opt: any, index: any) => (
              <Link
                onClick={() => {
                  //   setss(false);
                  //   queryRes = [];
                  setshowSuggestion(false);
                }}
                href={`/search?query=${opt.name}`}
                key={index}
              >
                <li
                  onClick={() => {
                    //   setss(false);
                    //   queryRes = [];
                    setshowSuggestion(false);
                  }}
                  className="z-10 bg-white font-normal shadow-xl text-gray-700 py-3 drop-shadow-md pl-2 cursor-pointer hover:bg-gray-200"
                >
                  {opt?.name}
                </li>
              </Link>
            ))
          : ""}
      </ul>
    </div>
  );
}

export default SuggestionsComp;