import React from "react";
import "./index.scss";
import MenuRoundedIcon from "@mui/icons-material/MenuRounded";
import { Link } from "react-router-dom";

export default function Navbar() {
  return (
    <nav className="nav align-items-center justify-content-center">
      <div className="nav__container d-flex align-items-center justify-content-between">
        {window.innerWidth > 1008 ? (
          <ul className="nav__container--links d-flex align-items-center">
            <li className="nav___logo d-flex align-items-center">
              <Link to="/">لوگو</Link>
              <span></span>
            </li>
            <li><Link to="/lessons">دروس</Link></li>
            <li><Link to="/courses">دوره‌ها</Link></li>
          </ul>
        ) : (
          <MenuRoundedIcon style={{ color: "white", fontSize : 40 }} />
        )}

        <ul className="nav__container--buttons d-flex align-items-center">
          <li className="nav___share"><Link to="/share">خرید اشتراک</Link></li>
          <li className="nav___login"><Link to="/login">ورود</Link></li>
        </ul>
      </div>
    </nav>
  );
}