// components/landing-page/navbar.tsx
import Image from "next/image";
import { Search } from "lucide-react";
import Link from "next/link";
import { Button } from "../ui/button";

export default function Navbar() {
  return (
    <header>
      {/* Top section dengan logo */}
      <div className="bg-[#3972ab] flex justify-center py-6">
        <Image
          src="/harapan.png" // ganti dengan path logo kamu
          alt="Kabar Harapan"
          width={200}
          height={80}
          priority
        />
      </div>

      {/* Navbar menu */}
      <nav className="bg-[#3a75a9] border-t border-[#427cae]">
        <div className="max-w-5xl mx-auto flex items-center justify-center gap-8 py-3 relative">
          <a
            href="/"
            className="text-black text-sm font-medium hover:underline"
          >
            HOME
          </a>
          <a
            href="/category/latest-news"
            className="text-black text-sm font-medium hover:underline"
          >
            BERITA TERKINI
          </a>
          <a
            href="/category/popular-news"
            className="text-black text-sm font-medium hover:underline"
          >
            BERITA TERPOPULER
          </a>

          {/* Search icon di kanan */}
          <div className="absolute right-4 flex items-center gap-2">
            <Search className="w-5 h-5 text-white cursor-pointer" />
            <Link href={"/auth"}>
              <Button className="bg-black text-white rounded-md px-5 py-2 hover:bg-yellow-500">
                Login
              </Button>
            </Link>
          </div>
        </div>
      </nav>
    </header>
  );
}