import React from "react";
import { Link } from "react-router-dom";
import "./Header.css";
import logImage from "../img/log.png";

function Header() {
  return (
    <header>
      <div className="container">
        <div id="logo">
          <Link to="/">
            <img src={logImage} alt="Логотип сайта" width="80" />
          </Link>
        </div>

        <nav>
          <ul>
            <li>
              <Link to="/">Главная</Link>
            </li>
            <li>
              <Link to="/categories">Категории</Link>
            </li>
            <li>
            <Link to="/admin">Админ-панель</Link>
          </li>
            <li>
              <form id="search-form">
                <input
                  type="text"
                  id="search-input"
                  placeholder="Поиск рецептов"
                />
                <button type="submit">Найти</button>
              </form>
            </li>
            <li>
              <Link to="/popular">Популярные рецепты</Link>
            </li>
            <li>
              <Link to="/contact">Контакты</Link>
            </li>
            <li>
              <div id="auth">
                <Link to="/login">Вход</Link>
                <Link to="/register">Регистрация</Link>
              </div>
            </li>
          </ul>
        </nav>
      </div>
    </header>
  );
}

export default Header;
