"use client";

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

export default function ApproverNavbar() {
  const [activeTab, setActiveTab] = useState("Kurasi Konten");

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

        {/* Middle: Tabs */}
        <div className="flex items-center gap-12">
          {["Kurasi Konten", "Publish Konten"].map((tab) => (
            <button
              key={tab}
              onClick={() => setActiveTab(tab)}
              className={`flex flex-col items-center text-sm font-medium transition ${
                activeTab === tab
                  ? "text-black border-b-2 border-[#C4A663]"
                  : "text-gray-500 hover:text-gray-800"
              }`}
            >
              {tab === "Kurasi Konten" ? (
                <span className="text-xl mb-1">🖼️</span>
              ) : (
                <span className="text-xl mb-1">🔁</span>
              )}
              <span>{tab}</span>
            </button>
          ))}
        </div>

        {/* Right: Notification + Avatar */}
        <div className="flex items-center gap-4">
          <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>
          <Image
            src="/non-user.png"
            alt="User"
            width={36}
            height={36}
            className="rounded-full border"
          />
        </div>
      </div>
    </div>
  );
}