const DropdownWithInput = ({ buttonLabel, options, placeholder, position = "append" }) => (
    <div className="input-group mb-3">
      {position === "prepend" && (
        <div className="input-group-prepend">
          <button
            className="btn btn-primary dropdown-toggle"
            type="button"
            data-toggle="dropdown"
            aria-haspopup="true"
            aria-expanded="false"
          >
            {buttonLabel}
          </button>
          <div className="dropdown-menu">
            {options.map((option, index) => (
              <a className="dropdown-item" href="#" key={index}>
                {option}
              </a>
            ))}
          </div>
        </div>
      )}
      <input type="text" className="form-control" placeholder={placeholder} />
      {position === "append" && (
        <div className="input-group-append">
          <button
            className="btn btn-primary dropdown-toggle"
            type="button"
            data-toggle="dropdown"
            aria-haspopup="true"
            aria-expanded="false"
          >
            {buttonLabel}
          </button>
          <div className="dropdown-menu">
            {options.map((option, index) => (
              <a className="dropdown-item" href="#" key={index}>
                {option}
              </a>
            ))}
          </div>
        </div>
      )}
    </div>
  );
  