---
import Icon from "astro-icon";
export type Link = {
  url: string;
  icon: string;
  newTab?: boolean;
};

export interface Props {
  links: Array<Link>;
}

const { links } = Astro.props;
---

  <nav>
    <div id="wrapper">
      {
        links
          .filter((link) => link.url !== "")
          .map((link) => (
            <a href={link.url} target={link.newTab ? "_blank" : null}>
              <Icon pack="mdi" name={link.icon} /> {link.icon}
            </a>
          ))
      }
    </div>
  </nav>

<style>
  nav {
    background: var(--ayo-gradient);
    display: flex;
    margin: 0 auto;
  }
  nav a {
    display: inline-block;
    text-decoration: underline;
    color: var(--color-bg);
    padding: 0.5em 1em;
    font-size: var(--font-size-sm);
  }
  nav a:hover {
    color: var(--color-brand-complement);
  }

  nav a svg {
    width: 1.5rem;
  }

  #wrapper {
    flex: 1;
    max-width: var(--content-width);
    margin: 0 auto;
    text-align: right;
  }
</style>
