"use client";
import Image from "next/image";
import { Bell } from "lucide-react";
import { useState } from "react";
import Link from "next/link";

export default function AdminNavbar() {
  const [activeTab, setActiveTab] = useState("Manajemen User");

  return (
    <div className="w-full bg-white shadow-sm flex justify-between items-center px-6 py-3 border-b border-gray-200">
      {/* Logo */}
      <div className="flex items-center gap-2">
        <Link href={"/"}>
          <Image src="/campaign.png" alt="Logo" width={60} height={60} />
        </Link>
      </div>

      {/* Middle Tabs */}
      <div className="flex items-center gap-8">
        <button
          onClick={() => setActiveTab("Manajemen User")}
          className={`flex flex-col items-center text-sm font-medium px-4 py-2 rounded-md transition ${
            activeTab === "Manajemen User"
              ? "bg-[#f7f7f7] border-b-2 border-[#C4A663] text-gray-900"
              : "text-gray-500 hover:text-gray-800"
          }`}
        >
          <span className="text-base">🖼️</span>
          <span>Manajemen User</span>
        </button>
      </div>

      {/* Right Section */}
      <div className="flex items-center gap-4">
        {/* Notifikasi */}
        <button className="relative text-gray-600 hover:text-gray-800">
          <Bell className="w-5 h-5" />
          <span className="absolute -top-1 -right-1 bg-blue-500 text-white text-[10px] w-4 h-4 flex items-center justify-center rounded-full">
            6
          </span>
        </button>

        {/* Avatar Admin */}
        <div className="flex items-center gap-2">
          <Image
            src="/non-user.png"
            alt="User"
            width={36}
            height={36}
            className="rounded-full border"
          />
        </div>
      </div>
    </div>
  );
}