import { login, logout } from "@/constants/routes/handleAuth"

import { auth } from "@/auth"

import styles from "./topMenu.module.css"

import type { TopMenuProps } from "@/types/components/current/header/topMenu"

export default async function TopMenu({
  frontpageLinkText,
  homeHref,
  links,
  languageSwitcher,
  lang,
}: TopMenuProps) {
  const session = await auth()

  return (
    <div className={styles.topMenu}>
      <div className={styles.container}>
        <a className={styles.homeLink} href={homeHref}>
          {frontpageLinkText}
        </a>

        <ul className={styles.list}>
          <li className={styles.langSwitcher}>{languageSwitcher}</li>

          {links.map(({ link }, i) => (
            <li key={link.href + i}>
              <a className={styles.link} href={link.href}>
                {link.title}
              </a>
            </li>
          ))}
          <li className={styles.loginContainer}>
            {session ? (
              <a href={logout[lang]} className={styles.loginLink}>
                Log out
              </a>
            ) : (
              <a href={login[lang]} className={styles.loginLink}>
                Log in
              </a>
            )}
          </li>
        </ul>
      </div>
    </div>
  )
}