feat: add previous and next country navigation

country-explorer/src/components/App.tsx

@@ -4,13 +4,24 @@ import { useCountries } from '../hooks/useCountries';
 import CountryCard from './CountryCard';
 import Loading from './Loading';
 import ErrorMessage from './ErrorMessage';
+import NavigationControls from './NavigationControls';
 
 function App() {
   const { countries, isLoading, isError, error, refetch } = useCountries();
   const [selectedCountryCode, setSelectedCountryCode] = useState<string | null>(null);
   const selectedCountry =
     countries.find((country) => country.code === selectedCountryCode) ?? countries[0];
   const activeCountryCode = selectedCountry?.code ?? null;
+  const activeCountryIndex = countries.findIndex((country) => country.code === activeCountryCode);
+
+  function navigateCountry(direction: -1 | 1) {
+    setSelectedCountryCode((currentCode) => {
+      const currentIndex = countries.findIndex((country) => country.code === currentCode);
+      if (currentIndex === -1) return countries[0]?.code ?? null;
+
+      return countries[currentIndex + direction]?.code ?? currentCode;
+    });
+  }
 
   // Keep the selection valid when data arrives or the available countries change.
   // Store the fallback so a removed country is not reselected if it returns later.
@@ -57,11 +68,19 @@ function App() {
               onRetry={() => void refetch()}
             />
           ) : selectedCountry ? (
-            <CountryCard country={selectedCountry} />
+            <>
+              <CountryCard country={selectedCountry} />
+              <NavigationControls
+                currentIndex={activeCountryIndex}
+                totalCountries={countries.length}
+                onPrevious={() => navigateCountry(-1)}
+                onNext={() => navigateCountry(1)}
+              />
+            </>
           ) : (
             <p>No countries available.</p>
           )}
-          {/* FavoriteButton and NavigationControls go here */}
+          {/* FavoriteButton goes here */}
         </section>
 
         <section aria-labelledby="favorites-heading">

country-explorer/src/components/NavigationControls.css

@@ -0,0 +1,34 @@
+.country-navigation {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+  gap: 1rem;
+  margin: 1rem;
+}
+
+.country-navigation button {
+  min-height: 44px;
+  padding: 0.5rem 1rem;
+  font: inherit;
+  color: var(--text-h);
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.country-navigation button:hover:not(:disabled) {
+  background: var(--accent-bg);
+  border-color: var(--accent);
+}
+
+.country-navigation button:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 3px;
+}
+
+.country-navigation button:disabled {
+  opacity: 0.5;
+  cursor: default;
+}

country-explorer/src/components/NavigationControls.tsx

@@ -0,0 +1,44 @@
+import './NavigationControls.css';
+
+interface NavigationControlsProps {
+  currentIndex: number;
+  totalCountries: number;
+  onPrevious: () => void;
+  onNext: () => void;
+}
+
+function NavigationControls({
+  currentIndex,
+  totalCountries,
+  onPrevious,
+  onNext,
+}: NavigationControlsProps) {
+  const hasSelection =
+    Number.isInteger(currentIndex) && currentIndex >= 0 && currentIndex < totalCountries;
+
+  return (
+    <nav className="country-navigation" aria-label="Country navigation">
+      <button
+        type="button"
+        onClick={onPrevious}
+        disabled={!hasSelection || currentIndex === 0}
+        aria-label="Previous country"
+      >
+        Previous
+      </button>
+      <p role="status" aria-live="polite" aria-atomic="true">
+        {hasSelection ? `Country ${currentIndex + 1} of ${totalCountries}` : 'No country selected'}
+      </p>
+      <button
+        type="button"
+        onClick={onNext}
+        disabled={!hasSelection || currentIndex === totalCountries - 1}
+        aria-label="Next country"
+      >
+        Next
+      </button>
+    </nav>
+  );
+}
+
+export default NavigationControls;