---
import { i18n } from "@i18n/utils";
const lang = i18n.getLangFromUrl(Astro.url);
const t = i18n.useTranslations(lang);
---

<nav class="top-header">
  <div id="title-background" class="title-background">
    <div class="left">
      <a href={`/${lang}/`} class="header-item">{t("nav.brand")}</a>
    </div>
    <div class="right">
      <a href={`/${lang}/marketplace/`} class="header-item">Marketplace</a>
      <a href={`/${lang}/games/`} class="header-item">{t("nav.games")}</a>
      <a href={`/${lang}/settings/`} class="header-item">{t("nav.settings")}</a>
    </div>
  </div>
</nav>

<style>
  .top-header {
    display: flex;
    box-sizing: border-box;
    transition: 250ms ease-in;
  }

  .title-background {
    background-color: var(--accent-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-inline: 2.5rem;
    height: 4.25rem;
    width: 100%;
    border-bottom-left-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
    box-shadow: -2px 5px 10px 0 var(--accent-color);
  }

  @media (max-width: 425px) {
    .title-background {
      padding-inline: 1.5rem;
    }
  }

  .left,
  .right {
    display: flex;
    align-items: center;
    gap: 20px;
  }

  .header-item {
    color: var(--text-color);
    text-decoration: none;
    font-size: 22px;
    transition: 250ms ease-in-out;
  }

  @media (max-width: 470px) {
    .header-item {
      font-size: 18px;
    }
  }

  .header-item:hover {
    color: var(--text-color-accent);
  }
</style>
