import React from "react";

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

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

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

export function NavPanel() {
  return (
    <Nav className="nav">
      <NavList>
        {navList.map((element, index) => (
          <li key={element.href}>
            <Link contrast={Boolean(index)} href={element.href}>
              {element.title}
            </Link>
          </li>
        ))}
      </NavList>
    </Nav>
  );
}