// 'use client';

// import images from '@/assets/images/images';
// import { Icon } from '@/components/uikit/icons';
// import { t } from '@/locales/translates';
// import Image from 'next/image';
// import Link from 'next/link';
// import { usePathname } from 'next/navigation';
// import { useState } from 'react';

// export default function Navbar() {
//   const [open, setOpen] = useState(false);
//   const pathname = usePathname();

//   const links = [
//     { href: '/', label: t('pages_home_title') as string },
//     { href: '/about', label: t('pages_about_title') as string },
//     { href: '/blog', label: t('pages_contact_title') as string },
//     { href: '/contact', label: t('pages_contact_title') as string },
//     { href: '/product', label: t('pages_products_title') as string },
//     { href: '/project', label: t('pages_projects_title') as string },
//   ];

//   const linkClass = (href: string) =>
//     pathname === href ? ' text-red-500 font-semibold' : 'text-white';

//   return (
//     <nav className="relative z-10 container mx-auto shrink-0 bg-transparent pt-7 pb-3 md:py-11">
//       <div className="flex items-center justify-between border-b-0 border-white/10 pb-6 md:border-b-[1px]">
//         <Link href="/" 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 md:flex lg:text-base">
//           {links.map(({ href, label }) => (
//             <li key={href}>
//               <Link
//                 href={href}
//                 className={`${linkClass(href)} hover:text-primary-light`}
//               >
//                 {label}
//               </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>

//         <button
//           className="text-gray-700 md:hidden"
//           onClick={() => setOpen(!open)}
//         >
//           {open ? (
//             <Icon name="close" className="text-white" />
//           ) : (
//             <Icon name="menu" className="text-white" />
//           )}
//         </button>
//       </div>

//       {open && (
//         <ul className="mt-2 space-y-2 px-2 md:hidden">
//           {links.map(({ href, label }) => (
//             <li key={href}>
//               <Link
//                 href={href}
//                 className={linkClass(href)}
//                 onClick={() => setOpen(false)}
//               >
//                 {label}
//               </Link>
//             </li>
//           ))}
//         </ul>
//       )}
//     </nav>
//   );
// }

'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 } from 'next/navigation';
import { useState } from 'react';
import HamburgerMenu from '../hamburgerMenu';
import { t } from '@/locales/translates';

export default function Navbar() {
  const [open, setOpen] = useState(false);
  const pathname = usePathname();

  const links = [
    { href: '/', label: t('pages_home_title') as string },
    { href: '/about', label: t('pages_about_title') as string },
    { href: '/blog', label: t('pages_contact_title') as string },
    { href: '/contact', label: t('pages_contact_title') as string },
    { href: '/product', label: t('pages_products_title') as string },
    { href: '/project', label: t('pages_projects_title') as string },
  ];
  const linkClass = (href: string) =>
    pathname === href ? 'text-primary font-semibold' : 'text-white';

  return (
    <>
      <nav className="relative z-50 container mx-auto bg-transparent pt-7 pb-3 md:py-11">
        <div className="flex items-center justify-between border-b-0 border-white/10 pb-6 md:border-b">
          <Link href="/" 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 md:flex lg:text-base">
            {links.map(({ href, label }) => (
              <li key={href}>
                <Link
                  href={href}
                  className={`${linkClass(href)} hover:text-primary-light`}
                >
                  {label}
                </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 md:hidden"
              onClick={() => setOpen(true)}
            >
              <Icon name="menu" className="h-6 w-6" />
            </button>
          )}
        </div>
      </nav>

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