---
import { Icon } from 'astro-icon/components'
import type { Link } from '../constants/links'

export interface Props {
  links: Link[]
}

let { links } = Astro.props

if (Astro.url.pathname !== '/') {
  links = [
    {
      url: '/',
      icon: 'home',
    },
  ].concat(links)
}
---

<nav>
  <div id="wrapper">
    {
      links
        .filter((link) => link.url !== '')
        .map((link) => (
          <a
            class:list={[
              {
                'u-url': !link.excludeHCard,
              },
            ]}
            href={link.url}
            aria-label={link.text}
          >
            <Icon
              width="1.5em"
              height="1.5em"
              name={`${link.set ?? 'mdi'}:${link.icon}`}
            />{' '}
            {link.text ?? 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(--text-color-light);
    padding: 0.5em 1em;
    font-size: var(--font-size-sm);
  }
  nav a:hover {
    color: var(--color-brand-complement);
  }

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

  @media only screen and (max-device-width: 360px) {
    #wrapper {
      text-align: center;
    }
    nav a {
      padding: 0.5em;
    }
  }

  a {
    font-weight: bold;
  }
</style>