refactor: enhance LanguageSwitcher component with tooltip for current locale

src/layouts/common/languageSwitcher/LanguageSwitcher.jsx

@@ -1,14 +1,28 @@
 import React, { useContext } from "react";
 import { AppContext } from "App";
 import { useTheme } from "@mui/material/styles";
-import { IconButton } from "@mui/material";
+import { IconButton, Tooltip } from "@mui/material";
+import Zoom from "@mui/material/Zoom";
+
 // import { FormattedMessage } from "react-intl";
 import LanguageOutlinedIcon from "@mui/icons-material/LanguageOutlined";
 
 const LanguageSwitcher = () => {
 	const theme = useTheme();
 	const appContext = useContext(AppContext);
+	const currentLocale =
+		appContext && appContext.locale
+			? String(appContext.locale).toUpperCase()
+			: "EN";
+
 	return (
+		<Tooltip
+			title={currentLocale}
+			disableInteractive
+			slots={{
+				transition: Zoom,
+			}}>
+			<span>
 				<IconButton
 					aria-label="Language Switcher"
 					onClick={() => {
@@ -27,6 +41,8 @@ const LanguageSwitcher = () => {
 					}}>
 					{<LanguageOutlinedIcon />}
 				</IconButton>
+			</span>
+		</Tooltip>
 	);
 };