import React from "react";

const links = [
  { href: "https://youtube.com", label: "Youtube" },
  { href: "https://www.discogs.com/", label: "Discog" },
  { href: "https://findmusicbylyrics.com/", label: "Find music by Lyrics" },
  { href: "https://musicbrainz.org/", label: "MusicBrainz" }
].map(link => {
  link.key = `nav-link-${link.href}-${link.label}`;
  return link;
});

const Nav = () => (
  <nav className="ad-nav">
    <ul>
      <li>Für die Recherche:</li>
      {links.map(({ key, href, label }) => (
        <li key={key}>
          <a href={href} target="_blank">
            {label}
          </a>
        </li>
      ))}
    </ul>
  </nav>
);

export default Nav;