"use client";

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

export function LocaleToggleClient({ current }: { current: Locale }) {
  const router = useRouter();

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

  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>
  );
}