import React, { useRef } from "react";
import SearchIcon from "./icons/SearchIcon";
import CloseIcon from "./icons/CloseIcon";
import clsx from "clsx";

function SearchInput(
  props: React.InputHTMLAttributes<HTMLInputElement> & {
    setSearch: React.Dispatch<React.SetStateAction<string | null>>;
  }
) {
  // const [value, setValue] = useState();
  const ref = useRef<HTMLInputElement>(null);

  return (
    <div
      className={clsx(
        "p-[0.556vw] bg-[#F6F6F6] rounded-[0.833vw] w-full flex items-center gap-[1.111vw] hover:bg-[#F0F0F0] px-[1.111vw] py-[1.215vw]"
      )}
    >
      <div className="flex gap-[0.566vw] items-center flex-1">
        <span className="text-[#7D7D7D] size-[1.389vw]">
          <SearchIcon />
        </span>
        <input
          className="outline-none focus:outline-none placeholder:button-m placeholder:font-medium placeholder:text-[#7D7D7D] button-m font-medium flex-1"
          {...props}
          ref={ref}
        />
      </div>
      <div
        className={clsx(
          "flex gap-[0.566vw] items-center transition-opacity",
          !props.value && "opacity-0"
        )}
      >
        <button
          disabled={!props.value}
          className="outline-none cursor-pointer disabled:cursor-default"
          onClick={() => {
            if (ref.current) {
              ref.current.value = "";
              ref.current.focus();
              props.setSearch(ref.current.value);
            }
          }}
        >
          <div className="text-[#7D7D7D] size-[1.111vw]">
            <CloseIcon />
          </div>
        </button>
      </div>
    </div>
  );
}

export default SearchInput;
