import React, { useState } from "react";
import { Navbar, Form, FormControl, Button } from "react-bootstrap";
import styles from "./SearchBar.module.css";

const SearchBar = () => {
  const [animeName, setAnimeName] = useState("");

  const handleChange = (event) => {
    setAnimeName(event.target.value);
  };

  const handleSubmit = async (event) => {
    event.preventDefault();
    // directing to a new page, that is routed to cards' component
    window.location = `/anime/cards/${animeName}`;
  };

  const onClick = (event) => {
    event.preventDefault();
    window.location = "/";
  };

  return (
    <div className={styles.container}>
      <Navbar className={styles.nav}>
        <span className={styles.span} onClick={onClick}>
          Anime Tracker App
        </span>
        <div className={styles.searchBar}>
          <Form inline onSubmit={handleSubmit}>
            <FormControl
              onChange={handleChange}
              type="text"
              placeholder="Anime"
              className=" mr-sm-2"
            />
            <Button className={styles.button} type="submit">
              Enter
            </Button>
          </Form>
        </div>
      </Navbar>
    </div>
  );
};

export default SearchBar;