"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { locales } from "@/i18n";

export function LanguageSwitcher({
  locale,
  scrolled = false,
}: {
  locale: string;
  scrolled?: boolean;
}) {
  const pathname = usePathname();
  const strippedPath = pathname.replace(`/${locale}`, "") || "/";

  return (
    <div
      className={`flex items-center gap-1 rounded-full p-1 transition-colors duration-300 ${
        scrolled ? "bg-brand-grey-soft" : "bg-white/10"
      }`}
    >
      {locales.map((l) => (
        <Link
          key={l}
          href={`/${l}${strippedPath}`}
          className={`px-3 py-1 rounded-full text-sm font-medium transition-colors duration-300 ${
            l === locale
              ? "bg-brand-green text-white"
              : scrolled
                ? "text-brand-grey hover:text-brand-green-dark"
                : "text-white/80 hover:text-white"
          }`}
        >
          {l.toUpperCase()}
        </Link>
      ))}
    </div>
  );
}