// import
import React from 'react';
import { router } from '@inertiajs/react';


type SearchBarProps = {
  searchResultCount?: number;
  newsFilterType?: string;
  searchData?: string;
  setSearchData?: (data: string) => void;
  resultNum?: number;
};

export default function SearchBar({ searchResultCount, newsFilterType = '', searchData, setSearchData, resultNum = 0 }: SearchBarProps) {
  // const searchString = new URLSearchParams(window.location.search).get('search') || '';

  return (
    <div className="flex flex-wrap justify-between items-center pt-32">
      <p className="text-t3-medium">Results ({resultNum})</p>
      <div className="inputText w-[158px] lg:w-[285px]">
        <form
          onSubmit={(e) => {
            e.preventDefault();
            const formData = new FormData(e.currentTarget);
            const value = formData.get('input-search')?.toString() || '';
            const query = value.trim();
            setSearchData?.(query);
            // window.alert(`Searching for: ${query}`);
            // window.location.href = route('news') + (query ? `?search=${encodeURIComponent(query)}` : '');
            //inertia location.href

            // router.visit('/news', {
            //   method: 'get',
            //   data: {
            //     search: query,
            //     type: newsFilterType
            //   },
            // });
          }}
          className="flex items-center relative"
        >
          <input
            className="inputText-input inputText-input--page flex-grow"
            type="search"
            name="input-search"
            id="input-search"
            placeholder="Search"
            defaultValue={searchData}
          />
          <button type="submit" className="absolute right-3 ml-2 w-20 h-20 bg-blue-500 text-white rounded-full cursor-pointer">

          </button>
        </form>
      </div>
    </div >
  );
}