"use client"

import { classNames } from "@repo/config-tailwind/classNames"
import type { Locale } from "@repo/i18n/config"
import { LOCALES } from "@repo/i18n/config"
import { usePathname, useRouter } from "@repo/i18n/navigation"
import { useLocale, useTranslations } from "next-intl"

export const Locales: React.FC = () => {
  const router = useRouter()
  const pathname = usePathname()
  const localeCurrent = useLocale() as Locale

  const t = useTranslations()

  return (
    <section>
      <ul className="flex list-none gap-6">
        {LOCALES.map((locale) => {
          return (
            <li
              key={locale}
              className={classNames("rounded-md p-2", {
                "border-primary dark:border-primary-dark border":
                  locale === localeCurrent,
              })}
            >
              <button
                className="text-primary dark:text-primary-dark font-semibold hover:underline focus:rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2"
                onClick={() => {
                  router.replace(pathname, { locale, scroll: false })
                  router.refresh()
                }}
              >
                {t(`locales.${locale}`)}
              </button>
            </li>
          )
        })}
      </ul>
    </section>
  )
}