"use client";

import { useLocale } from "next-intl";
import { usePathname } from "@/i18n/navigation";
import { Link } from "@/i18n/navigation";
import { routing } from "@/i18n/routing";

export function LocaleSwitch() {
  const locale = useLocale();
  const pathname = usePathname();

  return (
    <span className="flex items-center gap-2">
      {routing.locales.map((loc, i) => (
        <span key={loc} className="flex items-center gap-2">
          {i > 0 && <span className="opacity-40">/</span>}
          <Link
            href={pathname}
            locale={loc}
            className={loc === locale ? "text-[var(--rk-ink)]" : "hover:text-[var(--rk-ink)] transition-colors"}
          >
            {loc.toUpperCase()}
          </Link>
        </span>
      ))}
    </span>
  );
}