"use client";

import { useLocale, useTranslations } from "next-intl";
import { useRouter, usePathname } from "next/navigation";

export function LanguageSwitcher() {
  const locale = useLocale();
  const router = useRouter();
  const pathname = usePathname();
  const t = useTranslations("footer");

  function switchLocale(newLocale: string) {
    const segments = pathname.split("/");
    segments[1] = newLocale;
    router.push(segments.join("/"));
  }

  return (
    <div className="flex items-center gap-2">
      <span className="text-sm text-gray-400">{t("language")}:</span>
      <button
        onClick={() => switchLocale("es")}
        className={`text-sm ${locale === "es" ? "text-white font-bold" : "text-gray-400 hover:text-white"}`}
      >
        ES
      </button>
      <span className="text-gray-600">|</span>
      <button
        onClick={() => switchLocale("en")}
        className={`text-sm ${locale === "en" ? "text-white font-bold" : "text-gray-400 hover:text-white"}`}
      >
        EN
      </button>
    </div>
  );
}