feat: harden bootstrap and add tests

src/components/LanguageSwitcher.tsx

@@ -1,21 +1,35 @@
 'use client';
 
-import { useState, useEffect } from 'react';
-import { getLanguage, setLanguage } from '@/lib/i18n';
+import { Language, setLanguage, useLanguage } from '@/lib/i18n';
+
+function Flag({ language }: { language: Language }) {
+  if (language === 'en') {
+    return (
+      <svg width="24" height="16" viewBox="0 0 24 16" fill="none">
+        <rect width="24" height="16" fill="white" />
+        <rect x="0" y="6" width="24" height="4" fill="#CE1124" />
+        <rect x="10" y="0" width="4" height="16" fill="#CE1124" />
+      </svg>
+    );
+  }
+
+  return (
+    <svg width="24" height="16" viewBox="0 0 24 16" fill="none">
+      <rect width="24" height="16" fill="white" />
+      <rect y="0" width="24" height="5.33" fill="#EF3340" />
+      <rect y="10.67" width="24" height="5.33" fill="#EF3340" />
+      <rect y="5.33" width="24" height="5.33" fill="#073685" />
+      <path d="M12 8L10.39 9.18L11.02 7.24L9.39 6.82L11.2 6.82L12 5L12.81 6.82L14.62 6.82L12.98 7.24L13.61 9.18L12 8Z" fill="#FFD100" />
+    </svg>
+  );
+}
 
 export default function LanguageSwitcher() {
-  const [currentLang, setCurrentLang] = useState<'en' | 'es'>('en');
-
-  useEffect(() => {
-    setCurrentLang(getLanguage());
-  }, []);
+  const currentLang = useLanguage();
+  const nextLanguage = currentLang === 'en' ? 'es' : 'en';
 
   const toggleLanguage = () => {
-    const newLang = currentLang === 'en' ? 'es' : 'en';
-    setLanguage(newLang);
-    setCurrentLang(newLang);
-    // Reload the page to apply the language change
-    window.location.reload();
+    setLanguage(nextLanguage);
   };
 
   return (
@@ -29,13 +43,15 @@ export default function LanguageSwitcher() {
         background: 'rgba(255, 255, 255, 0.9)',
         border: '1px solid #ddd',
         borderRadius: '4px',
-        padding: '0.5rem 1rem',
+        padding: '0.5rem',
         cursor: 'pointer',
-        fontSize: '0.9rem',
-        fontWeight: 'bold',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
       }}
+      aria-label={`Switch to ${currentLang === 'en' ? 'Spanish' : 'English'}`}
     >
-      {currentLang === 'en' ? 'ES' : 'EN'}
+      <Flag language={nextLanguage} />
     </button>
   );
-}
+}