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

'use client';

import images from '@/assets/images/images';
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: 'Home' },
    { href: '/services', label: 'About US' },
    { href: '/blog', label: 'Products' },
    { href: '/contact', label: 'Blog' },
    { href: '/contact', label: 'Project' },
    { href: '/contact', label: 'Contact Us' },

  ];

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

  return (
    <nav className="bg-transparent container mx-auto py-11 shrink-0 relative z-10 ">
      <div className=" flex items-center justify-between">
        <Link href="/" className="text-xl font-bold ">
        <Image  alt='logo' src={images.logo} className='w-auto h-auto'/></Link>

        <ul className="hidden md:flex space-x-6">
          {links.map(({ href, label }) => (
            <li key={href}>
              <Link href={href} className={`${linkClass(href)} hover:text-primary-light `}>
                {label}
              </Link>
            </li>
          ))}
          <li>
            <a className='flex gap-2 items-center' href='tel:+098123456789'>

            <span>xx</span>
            <p>+098 123456789</p>
            </a>
          </li>
        </ul>

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

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