import React from "react";
import { Link } from "react-router-dom";

export default function Navbar() {
  return (
    <nav className="navbar navbar-expand-lg navbar-dark bg-custom-dark px-3">
      <Link className="navbar-brand" to="/">
        <img src="/img/manga.png" alt="ЛОГО" height="50" />
      </Link>
      {/* Бургер-кнопка для мобилок */}
      <button
        className="navbar-toggler"
        type="button"
        data-bs-toggle="collapse"
        data-bs-target="#navbarNavDropdown"
        aria-controls="navbarNavDropdown"
        aria-expanded="false"
        aria-label="Переключить навигацию"
      >
        <span className="navbar-toggler-icon"></span>
      </button>

      <div className="collapse navbar-collapse ms-3" id="navbarNavDropdown">
        <ul className="navbar-nav ms-auto mb-2 mb-lg-0">
          <li className="nav-item me-2">
            <Link to="/news" className="btn btn-outline-warning">
              Новости
            </Link>
          </li>
          <li className="nav-item">
            <Link to="/account" className="btn btn-outline-warning">
              Вход
            </Link>
          </li>
        </ul>
      </div>
    </nav>
  );
}
