"use client";

import { usePathname, useRouter } from "next/navigation";
import type { Locale } from "@/content/types";

export function LanguageSwitcher({
  locale,
  light = false,
}: {
  locale: Locale;
  light?: boolean;
}) {
  const pathname = usePathname();
  const router = useRouter();

  function switchTo(target: Locale) {
    if (target === locale) return;
    document.cookie = `NEXT_LOCALE=${target}; path=/; max-age=${60 * 60 * 24 * 365}`;
    const rest = pathname.replace(/^\/(en|ar)/, "");
    router.push(`/${target}${rest || ""}`);
  }

  const border = light ? "border-white/30" : "border-charcoal-950/15";
  const inactive = light ? "text-white/60 hover:text-white" : "text-charcoal-400 hover:text-charcoal-950";

  return (
    <div className={`inline-flex items-center rounded-full border ${border} p-1 text-xs font-bold`}>
      <button
        type="button"
        onClick={() => switchTo("en")}
        aria-current={locale === "en"}
        className={`rounded-full px-3 py-1 transition-colors ${
          locale === "en" ? "bg-gold-500 text-charcoal-950" : inactive
        }`}
      >
        EN
      </button>
      <button
        type="button"
        onClick={() => switchTo("ar")}
        aria-current={locale === "ar"}
        className={`rounded-full px-3 py-1 transition-colors ${
          locale === "ar" ? "bg-gold-500 text-charcoal-950" : inactive
        }`}
      >
        AR
      </button>
    </div>
  );
}