import { getHTMLTextDir } from 'intlayer';
import { useEffect } from 'react';
import { useLocale } from 'react-intlayer';
/**
* Updates the HTML <html> element's `lang` and `dir` attributes based on the current locale.
* - `lang`: Informs browsers and search engines of the page's language.
* - `dir`: Ensures the correct reading order (e.g., 'ltr' for English, 'rtl' for Arabic).
*
* This dynamic update is essential for proper text rendering, accessibility, and SEO.
*/
export const useI18nHTMLAttributes = () => {
const { locale } = useLocale();
useEffect(() => {
// Update the language attribute to the current locale.
document.documentElement.lang = locale;
// Set the text direction based on the current locale.
document.documentElement.dir = getHTMLTextDir(locale);
}, [locale]);
};