Add next-intl to internationalize our project

components/Header.tsx

@@ -1,18 +1,40 @@
+"use client";
+
+import { useTranslations } from "next-intl";
 import Image from "next/image";
 import Link from "next/link";
 import NavItems from "./NavItems";
 import UserDropdown from "./UserDropdown";
 
 const Header = () => {
+  const t = useTranslations();
+
   return (
-    <header className="sticky top-0 header">
-      <div className="container header-wrapper">
+    <header className="header sticky top-0">
+      <div className="header-wrapper container">
         <Link href="/">
-          <Image src="/logo.svg" alt="CGR Logo" width={100} height={100} className="h-8 w-auto cursor-pointer" />
+          <Image
+            src="/logo.svg"
+            alt={t("header.title")}
+            width={100}
+            height={100}
+            className="h-8 w-auto cursor-pointer"
+          />
         </Link>
         <nav className="hidden sm:block">
           <NavItems />
         </nav>
+        <div className="mr-4 flex items-center gap-2">
+          <Link href="/" locale="en" className="text-sm">
+            EN
+          </Link>
+          <Link href="/" locale="de" className="text-sm">
+            DE
+          </Link>
+          <Link href="/" locale="rus" className="text-sm">
+            RU
+          </Link>
+        </div>
         <UserDropdown />
       </div>
     </header>

components/NavItems/NavItem.tsx

@@ -1,17 +1,21 @@
 "use client";
 
+import { useTranslations } from "next-intl";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 
 type NavItemProps = {
   item: {
-    label: string;
+    labelKey: string;
     href: string;
   };
 };
 
-export const NavItem: React.FC<NavItemProps> = ({ item: { label, href } }) => {
+export const NavItem: React.FC<NavItemProps> = ({
+  item: { labelKey, href },
+}) => {
   const pathname = usePathname();
+  const t = useTranslations();
 
   const isActive = (path: string) => {
     if (path === "/") return pathname === "/";
@@ -19,12 +23,13 @@ export const NavItem: React.FC<NavItemProps> = ({ item: { label, href } }) => {
   };
 
   const active = isActive(href);
+  const label = t(labelKey);
 
   return (
     <li key={href}>
       <Link
         href={href}
-        className={`hover:text-yellow-500 transition-colors ${active ? "text-gray-100 font-bold" : ""}`}
+        className={`transition-colors hover:text-yellow-500 ${active ? "font-bold text-gray-100" : ""}`}
       >
         {label}
       </Link>