import { Menu, LogOut, User, Globe } from "lucide-react";
import Link from "next/link";
import { signOut } from "next-auth/react";

interface AdminHeaderProps {
  onMenuClick: () => void;
}

export default function AdminHeader({ onMenuClick }: AdminHeaderProps) {
  return (
    <header className="sticky top-0 z-30 flex items-center justify-between px-4 py-4 bg-white border-b border-gray-100 sm:px-6 lg:px-8">
      <div className="flex items-center">
        <button
          className="p-2 mr-4 text-gray-500 rounded-md hover:bg-gray-100 lg:hidden"
          onClick={onMenuClick}
        >
          <Menu className="w-6 h-6" />
        </button>
        <h1 className="text-xl font-semibold text-heading lg:hidden">
          Admin Panel
        </h1>
      </div>

      <div className="flex items-center space-x-4">
        {/* Tombol Kembali ke Website */}
        <Link 
          href="/"
          className="flex items-center gap-2 text-sm text-gray-600 bg-gray-50 hover:bg-gray-100 px-3 py-2 rounded-full border border-gray-200 transition"
        >
          <Globe className="w-4 h-4" />
          <span className="hidden sm:inline-block">Kembali ke Website</span>
        </Link>
        
        <div className="flex items-center gap-2 text-sm text-gray-600 bg-gray-50 px-3 py-2 rounded-full border border-gray-100">
          <User className="w-4 h-4" />
          <span className="hidden sm:inline-block">Admin</span>
        </div>
        <button 
          onClick={() => signOut({ callbackUrl: '/login' })}
          className="p-2 text-gray-500 rounded-full hover:bg-red-50 hover:text-red-600 transition"
          title="Keluar"
        >
          <LogOut className="w-5 h-5" />
        </button>
      </div>
    </header>
  );
}