import { useState } from "preact/hooks";

export interface SearchBarProps {
    value: string;
    onChange: (value: string) => void;
}

export function SearchBar(props: SearchBarProps) {
    const { value, onChange } = props;
    const [inputValue, setInputValue] = useState(value);

    return (
      <div class="flex items-center justify-center w-full p-4">
          <input class="w-full flex-auto p-2 border border-gray-200 rounded
          focus:outline-none focus:border-gray-600"
          type="text" placeholder="Search..." value={inputValue}
          onInput={e=>{
                if(e.currentTarget){
                    setInputValue(e.currentTarget.value);
                    onChange(e.currentTarget.value);
                }
          }}/>
          <button class="flex-grow-0 p-2 ml-2 text-white bg-blue-500 rounded hover:bg-blue-600" 
          type="submit">Submit</button>
      </div>
    );
}