import { FormEvent } from 'react'
import { Label, TextInput } from 'flowbite-react'
import formTheme from '@/lib/themes/form'
import { SearchFormProps } from '../types'
import SearchButton from '@/lib/components/buttons/SearchButton'

export default function SearchForm({
  searchForm,
  setSearchForm,
  handleSearch,
}: {
  searchForm: SearchFormProps
  setSearchForm: (form: SearchFormProps) => void
  handleSearch: (e: FormEvent) => void
}) {
  return (
    <form className="mt-10" onSubmit={handleSearch}>
      <div className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 w-full gap-4 max-w-6xl">
        {/* Search Bank */}
        <div className="w-full max-w-96">
          <div className="mb-2 block">
            <Label htmlFor="search">Search Bank</Label>
          </div>
          <TextInput
            disabled={searchForm.searching}
            id="search"
            type="text"
            theme={formTheme.textInput}
            placeholder="Search by bank name or short name"
            value={searchForm.params.search || ''}
            onChange={(e) => {
              setSearchForm({
                ...searchForm,
                params: {
                  ...searchForm.params,
                  search: e.target.value,
                },
              })
            }}
          />
        </div>
      </div>

      <SearchButton isProcessing={searchForm.searching} className="mt-5" />
    </form>
  )
}