import React from "react";
import Divider from "../shadcn/divider";
import { ArrowRightIcon } from "../icons";
import Image from "next/image";

function QueryInput() {
  return (
    <div>
      <div className="bg-secondary rounded-[20px] h-[68 px]">
        {/* input and action button */}
        <form className="flex gap-4 p-2.5">
          <textarea
            name="q"
            cols={30}
            rows={4}
            className="bg-transparent h-12 focus:h-[128px] no-scrollbar pt-3 px-2 text-base placeholder:text-[#5D6165] text-[#9DA0A4] focus:text-white duration-200 tracking-[3%] outline-none resize-none w-full"
            placeholder="Ask your second brain..."
            // onKeyDown={(e) => {
            //   if (e.key === "Enter") {
            //     e.preventDefault();
            //     if (!e.shiftKey) push(parseQ());
            //   }
            // }}
            // onChange={(e) => setQ(e.target.value)}
            // value={q}
            // disabled={disabled}
          />

          <button
            // type="submit"
            // onClick={e => e.preventDefault()}
            // disabled={disabled}
            className="h-12 w-12 rounded-[14px] bg-[#21303D] all-center shrink-0 hover:brightness-125 duration-200 outline-none focus:outline focus:outline-primary active:scale-90"
          >
            <Image src={ArrowRightIcon} alt="Right arrow icon" />
          </button>
        </form>

        {/* <Divider /> */}
      </div>
      {/* selected sources */}
      {/* <div className="flex items-center gap-6 p-2 h-auto bg-secondary"> */}
      {/* <MultipleSelector
            key={options.length}
            disabled={disabled}
            defaultOptions={options}
            onChange={(e) => setSelectedSpaces(e.map((x) => parseInt(x.value)))}
            placeholder="Focus on specific spaces..."
            emptyIndicator={
              <p className="text-center text-lg leading-10 text-gray-600 dark:text-gray-400">
                no results found.
              </p>
            }
          /> */}
      {/* </div> */}
    </div>
  );
}

export default QueryInput;