From bb87defe2b4a9d489e7fb965867f098951897c53 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Fri, 16 Jan 2026 19:16:20 +0100
Subject: [PATCH] feat: Implement country name retrieval in dashboard component

---
 components/dashboard/Countries.tsx | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/components/dashboard/Countries.tsx b/components/dashboard/Countries.tsx
index d54b505..ba03ec9 100644
--- a/components/dashboard/Countries.tsx
+++ b/components/dashboard/Countries.tsx
@@ -27,6 +27,16 @@ export default function Countries({ countries }: CountriesProps) {
     return FlagComponent ? <FlagComponent className="w-5 h-5 rounded-sm shadow-sm" /> : null
   }
 
+  const getCountryName = (code: string) => {
+    if (!code || code === 'Unknown') return 'Unknown'
+    try {
+      const regionNames = new Intl.DisplayNames(['en'], { type: 'region' })
+      return regionNames.of(code) || code
+    } catch (e) {
+      return code
+    }
+  }
+
   return (
     <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-xl p-6">
       <h3 className="text-lg font-semibold mb-4 text-neutral-900 dark:text-white">
@@ -37,7 +47,7 @@ export default function Countries({ countries }: CountriesProps) {
           <div key={index} className="flex items-center justify-between">
             <div className="flex-1 truncate text-neutral-900 dark:text-white flex items-center gap-3">
               <span className="shrink-0">{getFlagComponent(country.country)}</span>
-              <span className="truncate">{country.country === 'Unknown' ? 'Unknown' : country.country}</span>
+              <span className="truncate">{getCountryName(country.country)}</span>
             </div>
             <div className="text-sm font-semibold text-neutral-600 dark:text-neutral-400 ml-4">
               {formatNumber(country.pageviews)}