import React, { useState, useEffect } from "react";
import Inputgroup from "./Inputgroup";
import SearchInput from "./SearchInput";
import { Button } from "components/Button/Button";
import { SVGSearch } from "components/icons";
import Link from "components/typography/Link";
import { useTranslation } from "react-i18next";


type Props = {
  className?: string;
};

/* ------------------------------- Categories ------------------------------- */


export function SearchBar({ className }: Props) {
  const [onSelected, setOnSelected] = useState(""); // Selected item from response list
  const { t, i18n } = useTranslation();

  
  const searchResolver = (item: any) => {
    setOnSelected(item.caption);
    console.log(onSelected);
  };
  return (
        //TOdO Need to add dropdown with categories 
    <Inputgroup className="m-0 p-0 bg-white">
      <div className="flex items-center w-full divide-x-2 divide-solid divide-gray-200 mr-2">
        {/* <div className="flex w-1/3">
        </div> */}
        <div className="w-full">
          <SearchInput
          onSelected={searchResolver} 
            className="w-full"
            inGroup={true}
            placeHolder={t("mainPage.search") + "..."}
          />
        </div>
      </div>
      <div className="pr-0.5">
        <Link to="/search-results"> 
        <Button onClick={()=>{}}>
          <Button.Icon>
            <SVGSearch className="fill-white stroke-white w-4 "></SVGSearch>
          </Button.Icon>
        </Button></Link>
      </div>
    </Inputgroup>
  );
}
