"use client";
import Image from "next/image";
import Logo from "@/image/logo.png";
import { ListIcon } from "@phosphor-icons/react/dist/ssr";
import Link from "next/link";
import { usePathname } from "next/navigation";

export default function Navbar() {
  const pathname = usePathname();

  const menu = [
    { label: "About Us", url: "/" },
    { label: "Services", url: "/" },
    { label: "Portfolio", url: "/portfolio" },
    { label: "Process", url: "/" },
    { label: "Kontak", url: "/" },
  ];

  return (
    <div className="bg-white px-4 py-6 flex items-center w-full justify-between md:py-5.5 md:px-16">
      <Image src={Logo} width={118} className="w-fit h-7.5" alt="logo" />
      <ListIcon className="size-8 text-secondary-400 cursor-pointer md:hidden" />
      <div className="md:flex gap-7.5 hidden">
        {menu?.map((item) => (
          <Link href={item?.url} key={item?.label}>
            <div className={`font-medium ${pathname === item?.url ? "text-primary-800" : "text-title"}`}>{item?.label}</div>
          </Link>
        ))}
      </div>
    </div>
  );
}