import React from "react";
// import { Link as ConnectedLink } from 'react-router-dom'

import { Link } from "../link";

import { Nav, NavList } from "./nav-panel.style";
import { URLs } from "../../__data__/urls";

const navList = [
  { title: "Home", href: "/r-and-m" },
  { title: "Персонажи", href: "/r-and-m/search" },
  { title: "Локации", href: "#03" },
  { title: "Эризоды", href: "#04" },
];

const nav = {
  home: { title: "Home", href: URLs.baseUrl },
  search: { title: "Персонажи", href: URLs.ui.search },
};

export function NavPanel({ currentNavElement }) {
  return (
    <Nav>
      <NavList>
        <li>
          <Link
            contrast={currentNavElement === nav.home.title}
            href={nav.home.href}
          >
            {nav.home.title}
          </Link>
        </li>
        {URLs.ui.search && (
          <li>
            <Link
              contrast={currentNavElement === nav.search.title}
              href={nav.search.href}
            >
              {nav.search.title}
            </Link>
          </li>
        )}
      </NavList>
    </Nav>
  );
}