import React, { useState } from "react";
import searchBarStyle from "./styles.module.css";

const SearchBar = () => {
  const [open, setOpen] = useState(false);

  return (
    <form
      className={`${searchBarStyle.searchBarContainer} ${open ? searchBarStyle.open : ""}`}
    >
      <input
        className={searchBarStyle.input}
        type="text"
        name=""
        id=""
        placeholder="Search"
      />
      <div
        className={searchBarStyle.searchBtn}
        onClick={() => setOpen((open) => !open)}
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width={24}
          height={24}
          viewBox="0 0 24 24"
          fill="none"
        >
          <path
            d="M19.5527 19.5536L14.7064 14.7074M9.16822 16.7847C13.3741 16.7847 16.7837 13.3751 16.7837 9.1692C16.7837 4.96328 13.3741 1.55371 9.16822 1.55371C4.9623 1.55371 1.55273 4.96328 1.55273 9.1692C1.55273 13.3751 4.9623 16.7847 9.16822 16.7847Z"
            stroke="currentColor"
            strokeWidth={1.5}
            strokeLinecap="round"
            strokeLinejoin="round"
          />
        </svg>
      </div>
    </form>
  );
};

export default SearchBar;