'use client';

import {forwardRef,type ComponentPropsWithoutRef} from 'react';
import {createPortal} from 'react-dom';
import NextLink,{useLinkStatus} from 'next/link';

function NavigationProgress(){
 const {pending}=useLinkStatus();
 if(!pending||typeof document==='undefined')return null;
 const language=document.documentElement.lang;
 const label=language==='en'?'Loading page':language==='ar'?'جارٍ تحميل الصفحة':'در حال بارگذاری صفحه';
 return createPortal(<><span className="account-navigation-progress" aria-hidden="true"/><output className="account-navigation-status" aria-live="polite" aria-atomic="true">{label}</output></>,document.body);
}

const AccountLink=forwardRef<HTMLAnchorElement,ComponentPropsWithoutRef<typeof NextLink>>(function AccountLink({children,...props},ref){
 return <NextLink {...props} ref={ref}>{children}<NavigationProgress/></NextLink>;
});

export default AccountLink;