"use client";

import { useLocale, useTranslations } from "next-intl";
import { useTranslationAlternates } from "@/contexts/translation-alternates";
import { usePathname, useRouter } from "@/i18n/navigation";

const locales = ["fr", "en"] as const;

export default function LanguageSwitcher() {
  const locale = useLocale();
  const router = useRouter();
  const pathname = usePathname();
  const tCommon = useTranslations("common");
  const alternates = useTranslationAlternates();

  function handleSwitch(targetLocale: string) {
    if (targetLocale === locale) {
      return;
    }
    if (alternates[targetLocale]) {
      router.replace(alternates[targetLocale], { locale: targetLocale });
    } else {
      router.replace(pathname, { locale: targetLocale });
    }
  }

  return (
    <div className="flex items-center gap-1 text-sm">
      {locales.map((loc, index) => (
        <span className="flex items-center" key={loc}>
          {index > 0 && (
            <span className="mx-1 select-none text-neutral-600">|</span>
          )}
          <button
            aria-current={locale === loc ? "true" : undefined}
            aria-label={tCommon("switchToLocale", {
              locale: loc === "fr" ? "Francais" : "English",
            })}
            className={`flex min-h-[48px] min-w-[48px] cursor-pointer items-center justify-center px-2 py-3 transition-colors duration-200 ${
              locale === loc
                ? "font-semibold text-[#fd105e]"
                : "text-neutral-400 hover:text-white"
            }`}
            onClick={() => handleSwitch(loc)}
            type="button"
          >
            {loc.toUpperCase()}
          </button>
        </span>
      ))}
    </div>
  );
}