"use client";
import { usePathname } from "next/navigation";
import Link from "next/link";
import { LANGS, type Lang } from "@/lib/config";
import classNames from "classnames";

export default function LangSwitcher({ lang }: { lang: Lang }) {
  const path = usePathname() || "/";
  // Remove language prefix and ensure leading slash
  const rest = path.replace(/^\/(ar|en)/, "") || "/";
  const normalizedRest = rest.startsWith("/") ? rest : `/${rest}`;
  return (
    <div className="inline-flex overflow-hidden rounded border border-slate-200 bg-white text-base shadow-sm transition-colors dark:border-slate-700 dark:bg-slate-900">
      {LANGS.map((l) => (
        <Link
          key={l}
          href={`/${l}${normalizedRest}`}
          className={classNames("px-3 py-2 transition-colors md:px-4 md:py-3", {
            "bg-brand-green text-white": l === lang,
            "hover:bg-gray-100 dark:hover:bg-slate-700 dark:text-slate-200":
              l !== lang,
          })}
        >
          {l.toUpperCase()}
        </Link>
      ))}
    </div>
  );
}