import { SearchableDropdown } from "@luciodale/react-searchable-dropdown";
import "@luciodale/react-searchable-dropdown/dist/single-style.css";
import { useEffect, useState } from "react";

function RemoteDropdown({ url }: { url: string }) {
  const [value, setValue] = useState<string | undefined>(undefined);
  const [options, setOptions] = useState<string[]>([]);

  useEffect(() => {
    fetch(url)
      .then((res) => res.json())
      .then((data) => setOptions(data));
  }, [url]);

  return (
    <SearchableDropdown
      options={options}
      value={value}
      setValue={setValue}
      placeholder="Select an option"
      dropdownOptionsHeight={312}
      debounceDelay={100}
    />
  );
}