pasargad/src/components/layout/navbar/index.tsx

'use client';

import images from '@/assets/images/images';
import { Icon } from '@/components/uikit/icons';
import Image from 'next/image';
import Link from 'next/link';
import { usePathname, useParams } from 'next/navigation';
import { useState } from 'react';
import HamburgerMenu from '../hamburgerMenu';
import { useTranslations } from 'next-intl';
import routeFactory from '@/assets/constants/routeFactory';

export default function Navbar() {
  const [open, setOpen] = useState<boolean>(false);
  const pathname = usePathname();
  const params = useParams();
  const locale = params.locale as string;
  const t = useTranslations();

  // Get localized routes
  const routes = routeFactory(t, locale);
  const links = [
    routes.home,
    routes.productCategories,
    routes.projects,
    routes.blog,
    routes.about,
    routes.contact,
  ];

  const linkClass = (href: string) => {
    let isActive = false;
    if (href === '/' || href === `/${locale}`) {
      isActive = pathname === '/' || pathname === `/${locale}`;
    } else {
      isActive = pathname.startsWith(href);
    }
    return isActive ? 'text-primary font-semibold' : 'text-white';
  };

  return (
    <>
      <nav className="relative z-50 bg-gradient-to-b from-black to-black/0 pt-7 md:pt-11">
        <div className="container mx-auto flex items-center justify-between border-b-0 border-white/10 pb-6">
          <Link href={`/${locale}`} className="h-12 w-auto">
            <Image
              alt="logo"
              src={images.logo}
              className="h-full w-auto object-contain"
            />
          </Link>

          <ul className="hidden space-x-6 text-sm lg:flex lg:text-base">
            {links.map(({ route, title }) => (
              <li key={route()}>
                <Link
                  href={route()}
                  className={`${linkClass(route())} hover:text-primary-light`}
                >
                  {title}
                </Link>
              </li>
            ))}
            <li>
              <a className="flex items-center gap-2" href="tel:+098123456789">
                <Icon name="phone" className="text-primary" />
                <p>+098 123456789</p>
              </a>
            </li>
          </ul>

          {!open && (
            <button
              className="text-white lg:hidden"
              onClick={() => setOpen(true)}
            >
              <Icon name="menu" className="h-6 w-6" />
            </button>
          )}
        </div>
      </nav>

      <HamburgerMenu isOpen={open} onClose={() => setOpen(false)} />
    </>
  );
}