"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { portfolioContent, type Language } from "@/data/portfolio";

export function LanguageToggle({ language }: { language: Language }) {
  const pathname = usePathname() ?? (language === "ar" ? "/ar" : "/");
  const nextLanguage = language === "en" ? "ar" : "en";
  const { languageLabel, languageToggleAriaLabel } = portfolioContent[language].ui;
  const segments = pathname.split("/").filter(Boolean);
  const contentSegments = segments[0] === "en" || segments[0] === "ar" ? segments.slice(1) : segments;
  const nextPath =
    nextLanguage === "ar"
      ? `/ar${contentSegments.length ? `/${contentSegments.join("/")}` : ""}`
      : `/${contentSegments.join("/")}` || "/";

  return (
    <Link
      href={nextPath}
      className="control-pill"
      aria-label={languageToggleAriaLabel}
    >
      {languageLabel}
    </Link>
  );
}