import useChatUIStore from "../../stores/Zustant";

const SearchInput = () => {
  const { searchTerm, setSearchTerm } = useChatUIStore();

  return (
    <div className="chat-search">
      <svg
        className="chat-search__icon"
        width="14"
        height="14"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        strokeWidth="2"
        strokeLinecap="round"
        strokeLinejoin="round"
        aria-hidden="true"
      >
        <circle cx="11" cy="11" r="8" />
        <line x1="21" y1="21" x2="16.65" y2="16.65" />
      </svg>
      <input
        className="chat-search__input"
        type="search"
        placeholder="Search messages"
        aria-label="Search conversations"
        value={searchTerm}
        onChange={(e) => setSearchTerm(e.target.value)}
      />
    </div>
  );
};

export default SearchInput;