"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";

export default function Navbar() {
  return (
    <div className="w-full bg-white">
      <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>

      <div className="flex max-w-screen-xl mx-auto items-center justify-between py-2 flex-wrap gap-y-2">
        <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">
          <Link
            href="/"
            className="text-[#795548] border-t-3 border-[#795548] pb-1"
          >
            HOME
          </Link>
          <Link
            href="/category/latest-news"
            className="text-black hover:text-[#795548]"
          >
            BERITA TERKINI
          </Link>
          <Link
            href="/category/popular-news"
            className="text-black hover:text-[#795548]"
          >
            BERITA POPULER
          </Link>
          <Link
            href="/category/protect"
            className="text-black hover:text-[#795548]"
          >
            JAGA NEGERI
          </Link>
          <Link
            href="/category/opinion-news"
            className="text-black hover:text-[#795548]"
          >
            BERITA OPINI
          </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>
  );
}