import { useRouter } from "next/router"
import { useTranslations } from "next-intl"

const LOCALES = [
  { code: "en", label: "EN" },
  { code: "fr", label: "FR" },
  { code: "es", label: "ES" },
]

export default function LanguageSwitcher() {
  const router = useRouter()
  const t = useTranslations("Navigation")

  const switchLocale = (locale) => {
    router.push(router.asPath, router.asPath, { locale })
  }

  return (
    <li className="nl-simple" aria-haspopup="true" style={{ listStyle: "none", marginLeft: "auto", fontSize: '10px' }}>
      <span className="h-link" style={{ cursor: "default" }}>
        {t("language")} <span className="wsarrow" />
      </span>
      <ul className="sub-menu">
        {LOCALES.map(({ code, label }) => (
          <li key={code} aria-haspopup="true">
            <a
              href="#"
              onClick={(e) => { e.preventDefault(); switchLocale(code) }}
              style={{ fontWeight: router.locale === code ? "700" : "400" }}
            >
              {label}
            </a>
          </li>
        ))}
      </ul>
    </li>
  )
}