Support multiple languages

frontend/src/components/layout/PublicHeader/PublicHeader.tsx

@@ -2,6 +2,7 @@ import React, { forwardRef } from 'react';
 import { clsx } from 'clsx';
 import { Link } from 'react-router-dom';
 import { Button, ThemeToggle } from '../../ui';
+import { CompactLanguageSelector } from '../../ui/LanguageSelector';
 
 export interface PublicHeaderProps {
   className?: string;
@@ -17,6 +18,10 @@ export interface PublicHeaderProps {
    * Show authentication buttons (login/register)
    */
   showAuthButtons?: boolean;
+  /**
+   * Show language selector
+   */
+  showLanguageSelector?: boolean;
   /**
    * Custom navigation items
    */
@@ -53,6 +58,7 @@ export const PublicHeader = forwardRef<PublicHeaderRef, PublicHeaderProps>(({
   logo,
   showThemeToggle = true,
   showAuthButtons = true,
+  showLanguageSelector = true,
   navigationItems = [],
   variant = 'default',
 }, ref) => {
@@ -149,6 +155,11 @@ export const PublicHeader = forwardRef<PublicHeaderRef, PublicHeaderProps>(({
 
           {/* Right side actions */}
           <div className="flex items-center gap-3">
+            {/* Language selector */}
+            {showLanguageSelector && (
+              <CompactLanguageSelector className="hidden sm:flex" />
+            )}
+
             {/* Theme toggle */}
             {showThemeToggle && (
               <ThemeToggle
@@ -162,8 +173,8 @@ export const PublicHeader = forwardRef<PublicHeaderRef, PublicHeaderProps>(({
             {showAuthButtons && (
               <div className="flex items-center gap-2">
                 <Link to="/login">
-                  <Button 
-                    variant="ghost" 
+                  <Button
+                    variant="ghost"
                     size="sm"
                     className="hidden sm:inline-flex"
                   >
@@ -171,7 +182,7 @@ export const PublicHeader = forwardRef<PublicHeaderRef, PublicHeaderProps>(({
                   </Button>
                 </Link>
                 <Link to="/register">
-                  <Button 
+                  <Button
                     size="sm"
                     className="bg-[var(--color-primary)] hover:bg-[var(--color-primary-dark)] text-white"
                   >
@@ -219,7 +230,17 @@ export const PublicHeader = forwardRef<PublicHeaderRef, PublicHeaderProps>(({
                 {renderNavLink(item)}
               </div>
             ))}
-            
+
+            {/* Mobile language selector */}
+            {showLanguageSelector && (
+              <div className="py-2 border-b border-[var(--border-primary)] sm:hidden">
+                <div className="text-sm font-medium text-[var(--text-secondary)] mb-2">
+                  Idioma
+                </div>
+                <CompactLanguageSelector className="w-full" />
+              </div>
+            )}
+
             {/* Mobile auth buttons */}
             {showAuthButtons && (
               <div className="flex flex-col gap-2 pt-4 sm:hidden">