"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { localeLabels, locales, localizePath } from "@/translations/config";
import { useI18n } from "@/translations/provider";

export default function LanguageSwitcher() {
  const pathname = usePathname();
  const { locale } = useI18n();

  return (
    <nav aria-label="Language" className="fixed right-3 top-3 z-40">
      <div className="flex overflow-hidden rounded-full border border-[#F2D4DA] bg-white/90 text-[11px] font-semibold shadow-[0_8px_22px_rgba(15,23,42,0.08)] backdrop-blur">
        {locales.map((nextLocale) => {
          const isActive = locale === nextLocale;

          return (
            <Link
              key={nextLocale}
              href={localizePath(pathname, nextLocale)}
              aria-current={isActive ? "page" : undefined}
              className={[
                "px-3 py-2 leading-none",
                isActive ? "bg-[#F0445B] text-white" : "text-[#4B5563]",
              ]
                .filter(Boolean)
                .join(" ")}
            >
              {localeLabels[nextLocale]}
            </Link>
          );
        })}
      </div>
    </nav>
  );
}