import React, { useState } from "react";
import styles from "./styles.module.css";
import SearchIcon from "../icons/search";

const MobileSearchBar = (props) => {
  const [open, setOpen] = useState(false);
  return (
    <form className={styles.searchBarContainer}>
      <div
        className={`${styles.searchBarWrapper} ${open ? styles.open : ""}`}
        onClick={() => setOpen((open) => !open)}
      >
        <input type="text" placeholder="Search" className={styles.searchBar} />
        <SearchIcon className={styles.searchIcon} />
      </div>
    </form>
  );
};

export default MobileSearchBar;