import React from "react";
import UserSearchDialog from "./UserSearchDialog";
import dynamic from "next/dynamic";

// Dynamically import ThemeToggle to avoid SSR issues
const ThemeToggle = dynamic(() => import("./ThemeToggle"), {
  ssr: false,
  loading: () => (
    <div className="h-10 w-10 rounded-lg border border-border bg-background animate-pulse"></div>
  ),
});

const Navbar: React.FC = () => {
  return (
    <nav className="w-full mt-4">
      <div className="max-w-6xl mx-auto px-4 py-3">
        <div className="flex items-center justify-end gap-3">
          <ThemeToggle />
          <UserSearchDialog />
        </div>
      </div>
    </nav>
  );
};

export default Navbar;