"use client";
import { Facebook, Instagram, Search, Twitter, Youtube } from "lucide-react";
import Image from "next/image";
import Link from "next/link";
import { Button } from "../ui/button";
import { usePathname } from "next/navigation";
import { cn } from "@/lib/utils"; // helper opsional, bisa hapus kalau tidak ada

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

  const navItems = [
    { label: "HOME", href: "/" },
    { label: "BERITA TERKINI", href: "/category/latest-news" },
    { label: "BERITA POPULER", href: "/category/popular-news" },
    { label: "JAGA NEGERI", href: "/category/protect" },
    { label: "BERITA OPINI", href: "/category/opinion-news" },
  ];

  return (
    <div className="w-full bg-white">
      {/* Banner */}
      <div className="relative w-full h-[113px]">
        <Image
          src="/bg-isu.jpg"
          alt="Kritik Tajam Background"
          width={1920}
          height={113}
          className="w-full h-full object-cover"
        />
        <div className="absolute inset-0 flex items-center justify-center">
          <Image
            src="/isukini.jpg"
            alt="Kritik Tajam Logo"
            width={100}
            height={93}
            className="object-contain"
          />
        </div>
      </div>

      {/* Navbar */}
      <div className="flex max-w-screen-xl mx-auto items-center justify-between py-2 flex-wrap gap-y-2">
        {/* Menu */}
        <div className="flex flex-wrap gap-x-4 md:gap-x-6 font-semibold text-sm mx-3 md:mx-3 lg:mx-3 xl:mx-0">
          {navItems.map((item) => {
            const isActive =
              item.href === "/"
                ? pathname === item.href
                : pathname.startsWith(item.href);

            return (
              <Link
                key={item.href}
                href={item.href}
                className={cn(
                  "pb-1 transition-colors",
                  isActive
                    ? "text-white bg-[#795548] px-2 rounded"
                    : "text-black hover:text-[#795548]"
                )}
              >
                {item.label}
              </Link>
            );
          })}
        </div>

        {/* Ikon kanan */}
        <div className="flex items-center space-x-4 text-black mt-2 md:mt-0 mr-3 md:mr-3 lg:mr-3 xl:mr-0">
          <Link href="#">
            <Facebook size={18} />
          </Link>
          <Link href="#">
            <Twitter size={18} />
          </Link>
          <Link href="#">
            <Instagram size={18} />
          </Link>
          <Link href="#">
            <Youtube size={18} />
          </Link>
          <Link href="#">
            <Search size={18} />
          </Link>

          <Link href={"/auth"}>
            <Button className="bg-black text-white rounded-md px-5 py-2 hover:bg-yellow-500">
              Login
            </Button>
          </Link>
        </div>
      </div>
    </div>
  );
}