"use client";

import { useRouter } from "next/navigation";
import { Globe } from "lucide-react";
import type { Locale } from "./locale-toggle";

export function LocaleToggleClient({
  current,
  variant = "retro",
}: { current: Locale; variant?: "retro" | "navbar" }) {
  const router = useRouter();

  function setLocale(next: Locale) {
    if (next === current) return;
    document.cookie = `locale=${next}; path=/; max-age=${60 * 60 * 24 * 365}; SameSite=Lax`;
    router.refresh();
  }

  if (variant === "navbar") {
    // Gold-amber magazine theme to match SiteHeader / BureauNav.
    return (
      <div className="inline-flex items-center gap-0.5 font-mono text-[11px] uppercase tracking-wider border border-[rgba(224,192,128,0.30)] rounded-full overflow-hidden">
        <span className="pl-2.5 pr-1 text-[#5a6678]"><Globe size={11} /></span>
        <button
          onClick={() => setLocale("pt-br")}
          aria-pressed={current === "pt-br"}
          className={`px-2 py-1 transition-colors ${current === "pt-br" ? "bg-[#e0c080] text-[#0a0e1a] font-semibold" : "text-[#9aa6b8] hover:text-[#e0c080]"}`}
        >
          PT
        </button>
        <button
          onClick={() => setLocale("en")}
          aria-pressed={current === "en"}
          className={`px-2 py-1 transition-colors ${current === "en" ? "bg-[#e0c080] text-[#0a0e1a] font-semibold" : "text-[#9aa6b8] hover:text-[#e0c080]"}`}
        >
          EN
        </button>
      </div>
    );
  }

  return (
    <div className="inline-flex items-center gap-1 font-mono text-[10px] uppercase tracking-widest border border-[rgba(0,255,156,0.32)] rounded">
      <span className="px-2 py-1 text-[#5a6678]"><Globe size={11} /></span>
      <button
        onClick={() => setLocale("en")}
        className={`px-2 py-1 ${current === "en" ? "bg-[rgba(0,255,156,0.12)] text-[#00ff9c]" : "text-[#8896aa] hover:text-[#7fdbff]"}`}
      >
        EN
      </button>
      <button
        onClick={() => setLocale("pt-br")}
        className={`px-2 py-1 ${current === "pt-br" ? "bg-[rgba(0,255,156,0.12)] text-[#00ff9c]" : "text-[#8896aa] hover:text-[#7fdbff]"}`}
      >
        PT-BR
      </button>
    </div>
  );
}