import React, { useState } from "react";
import SearchIcon from "./icons/SearchIcon";

function SearchInput(props: React.InputHTMLAttributes<HTMLInputElement>) {
  const [value, setValue] = useState("");

  return (
    <div className="relative">
      <input
        type="text"
        className="outline-none pl-2.5 pr-8 pt-[7px] pb-2 bg-[#F6F6F6] rounded-lg leading-none text-sm"
        value={value}
        onChange={(e) => setValue(e.target.value)}
        {...props}
      />
      {!value && (
        <div className="text-[#858585] absolute top-0 right-0 p-2">
          <SearchIcon />
        </div>
      )}
    </div>
  );
}

export default SearchInput;