{locales.map((locale) => (
            <li key={locale} className="hover:bg-hover-element">
              <Link
                href={{ pathname: pathName }}
                locale={locale}
              >

// src/middleware.ts

import { locales, pathnames, localePrefix, getPathname } from "./navigation";
import createMiddleware from "next-intl/middleware";

export default createMiddleware({
  pathnames,
  localePrefix,
  locales,
  defaultLocale: "en",
});

export const config = {
  matcher: ["/", "/(ro|en)/:path*", "/((?!_next|_vercel|.*\\..*).*)"],
};

 "/user/:userId": { en: "/user/:userId", ro: "/utilizator/:userId" },

const JobSeekerSidebar: React.FC<JobSeekerSidebarProps> = () => {
  const router = useRouter();
  const pathname = usePathname();
  const t = useTranslations("sidebar");
  const { user } = useUserSessionStore();
  const locale = useLocale() as 'en' | 'ro'; // Casting locale to the expected type

  const handleButtonClick = (path: keyof typeof pathnames, params?: { [key: string]: string }) => {
    // Get the localized path based on the current locale
    let localizedPath = getPathname({
      locale,
      href: path,
    });

    // If params are provided, replace the placeholders in the path
    if (params) {
      localizedPath = Object.keys(params).reduce((acc, key) => {
        return acc.replace(`:${key}`, params[key]);
      }, localizedPath);
    }

    // Navigate to the constructed path
    router.push(localizedPath);
  };

return (
 <IconButton
            icon={<FaRegUser />}
            label={t('myProfile')}
            onClick={() =>
              user?.id
                ? handleButtonClick('/user/:userId', { userId: user.id })
                : handleButtonClick('/user/:userId')
            }
            isActive={pathname === `/user/${user?.id}`}
          />
)