---
export interface Props {
  currentPage?: string
  navtype: 'mobile' | 'desktop'
  link: string
  text: string
  icon: ImageMetadata
}

const { icon, text, link, navtype, currentPage } = Astro.props

let currPage = ''
const slug = link.replace(new RegExp('/', 'g'), '')

if (currentPage === slug) {
  currPage = 'current'
} else if (currentPage === 'home' && link === '/') {
  currPage = 'current'
}

const icon_src_url = `url("${icon.src}")`
const fulllink = `/${slug}`

let extraattributes = navtype === 'mobile' ? { tabindex: '0' } : {}
---

<li>
  <a
    href={fulllink}
    rel="noopener noreferrer"
    aria-label={text}
    class={currPage}
    role="button"
    {...extraattributes}
  >
    <div class="icon"></div>
    {text}
  </a>
</li>

<style define:vars={{ icon_src_url }}>
  * {
    transition: all var(--a-time-default) var(--a-animation-1);
  }
  li {
    align-items: center;
    justify-content: center;
    text-align: left;
    display: flex;
  }

  li > a {
    display: inline-flex;
    color: var(--c-primary-text);
    text-decoration: none;
    justify-content: center;
    align-items: center;
    font-size: 1.4em;
    height: 100%;
    font-weight: bold;
    gap: 0.2em;
  }

  li > a:hover {
    color: var(--c-accent-1-alt) !important;
  }

  li > a:hover > .icon {
    background-color: var(--c-accent-1-alt) !important;
  }

  .current {
    color: var(--c-accent-1) !important;
  }

  .current > .icon {
    background-color: var(--c-accent-1) !important;
  }

  .icon {
    mask: var(--icon_src_url) no-repeat center;
    background-color: var(--c-primary-text);
    width: 1.4em;
    height: 1.4em;
  }

  @media (min-width: 304px) {
    li {
      width: 200px;
    }
  }
</style>