add hover to all country flags

projects/website/src/components/country-flag.tsx

@@ -1,3 +1,6 @@
+import Tooltip from "@/components/tooltip";
+import { normalizedRegionName } from "@ssr/common/utils/region-utils";
+
 type Props = {
   code: string;
   size?: number;
@@ -5,12 +8,14 @@ type Props = {
 
 export default function CountryFlag({ code, size = 24 }: Props) {
   return (
-    // eslint-disable-next-line @next/next/no-img-element
-    <img
-      alt="Player Country"
-      src={`/assets/flags/${code.toLowerCase()}.png`}
-      width={size * 2}
-      className={`w-[${size * 2}px] object-contain`}
-    />
+    <Tooltip display={<p>{normalizedRegionName(code)}</p>} asChild={false}>
+      {/* eslint-disable-next-line @next/next/no-img-element */}
+      <img
+        alt="Player Country"
+        src={`/assets/flags/${code.toLowerCase()}.png`}
+        width={size * 2}
+        className={`w-[${size * 2}px] object-contain`}
+      />
+    </Tooltip>
   );
 }