implemented language swicther

components/layout/Header.tsx

@@ -6,6 +6,8 @@ import { useParams, usePathname } from "next/navigation";
 import { CiMenuFries } from "react-icons/ci";
 import { IoCloseOutline } from "react-icons/io5";
 
+import LanguageSwitcher from "../ui/LanguageSwitcher";
+
 export default function Header() {
     const params = useParams<{ locale?: string }>();
     const pathname = usePathname();
@@ -84,7 +86,9 @@ export default function Header() {
                         ))}
                     </ul>
                 </nav>
-                <div className="hidden sm:block font-sans text-base font-light">France</div>
+                <div className="hidden sm:block">
+                    <LanguageSwitcher />
+                </div>
 
                 <nav className="block sm:hidden">
                     <button
@@ -140,10 +144,11 @@ export default function Header() {
                     </nav>
 
                     <div
-                        className={`text-brand-beige/80 text-sm font-sans transition-all duration-700 ${showText ? "translate-x-0 opacity-100" : "-translate-x-8 opacity-0"}`}
+                        className={`text-brand-beige/80 text-sm font-sans transition-all duration-700 flex justify-between items-center ${showText ? "translate-x-0 opacity-100" : "-translate-x-8 opacity-0"}`}
                         style={{ transitionDelay: showText ? "650ms" : "0ms" }}
                     >
-                        France
+                        <span>Sélection de la langue</span>
+                        <LanguageSwitcher />
                     </div>
                 </div>
             </div>

components/ui/LanguageSwitcher.tsx

@@ -0,0 +1,42 @@
+"use client";
+
+import { usePathname, useRouter } from "next/navigation";
+
+import { locales, defaultLocale } from "@/middleware";
+
+export default function LanguageSwitcher() {
+    const pathname = usePathname();
+    const router = useRouter();
+
+    // Extract the language from the url
+    const currentLocale = pathname.split('/')[1] || defaultLocale;
+
+    const switchLanguage = (newLocale: string) => {
+        if (currentLocale === newLocale) return;
+        
+        // Switch language in the url
+        const segments = pathname.split('/');
+        segments[1] = newLocale;
+        const newPath = segments.join('/');
+        
+        // Redirect user
+        router.push(newPath);
+    };
+
+    return (
+        <div className="flex items-center gap-2 font-sans text-xs uppercase tracking-widest text-brand-beige">
+            {locales.map((language, index) => (
+                <div key={index}>
+                    <button 
+                        onClick={() => switchLanguage(language)}
+                        className={`transition-opacity duration-200 cursor-pointer ${currentLocale === language ? 'opacity-100 font-medium' : 'opacity-40 hover:opacity-70'}`}
+                        aria-label="Passer en français"
+                    >
+                        {language}
+                    </button>
+                    {index < locales.length - 1 && <span className="opacity-20">|</span>}
+                </div>
+            ))}
+        </div>
+    );
+}