import { State } from "country-state-city";
import Select from "@/components/Select";
import { FetchPropertyParams } from "@/schema/services/property";

type FilterPropertyProps = {
  propertyType: "sell" | "rent";
  searchParams?: {
    [P in keyof FetchPropertyParams]: string | undefined;
  };
};

export default function FilterProperty({ propertyType, searchParams }: FilterPropertyProps) {
  const statesData = State.getStatesOfCountry("US").map((st) => ({ value: st.name, label: st.name }));

  return (
    <>
      <div className="block-info">
        <h3>Find Your Property</h3>
        <form className="form-select" action={propertyType === "rent" ? "/listings-for-rent" : "/listings-for-sell"}>
          <div className="form-wrap form-wrap-validation">
            <input className="form-input" placeholder="Name" name="name" defaultValue={searchParams?.name} />
          </div>
          <div className="form-wrap form-wrap-validation">
            <Select
              name="location"
              placeholder="Choose Location"
              options={statesData}
              defaultInputValue={searchParams?.location}
              defaultValue={searchParams?.location}
              isSearchable
              isClearable
            />
          </div>
          <div className="form-wrap-group">
            <div className="form-wrap form-wrap-validation">
              <input
                className="form-input"
                placeholder="Min Area Sqft"
                name="min_area"
                defaultValue={searchParams?.min_area}
              />
            </div>
            <div className="form-wrap form-wrap-validation">
              <input
                className="form-input"
                placeholder="Max Area Sqft"
                name="max_area"
                defaultValue={searchParams?.max_area}
              />
            </div>
          </div>
          <div className="form-wrap-group">
            <div className="form-wrap form-wrap-validation">
              <input
                className="form-input"
                placeholder="Min Price ($)"
                name="min_price"
                defaultValue={searchParams?.min_price}
              />
            </div>
            <div className="form-wrap form-wrap-validation">
              <input
                className="form-input"
                placeholder="Max Price ($)"
                name="max_price"
                defaultValue={searchParams?.max_price}
              />
            </div>
          </div>
          <div className="form-button">
            <button className="button button-block button-primary" type="submit">
              Search
            </button>
          </div>
        </form>
      </div>
    </>
  );
}
