import React, { useMemo } from "react";
import UserSearchDialog from "./UserSearchDialog";
import TrackedOrgsDialog from "./TrackedOrgsDialog";
import { CandidateSummary } from "../types/heatmap";

interface NavbarProps {
  allCandidates: CandidateSummary[];
  minActivityCount: number;
}

const Navbar: React.FC<NavbarProps> = ({ allCandidates, minActivityCount }) => {
  const candidateAuthors = useMemo(
    () => allCandidates.map((c) => c.author),
    [allCandidates]
  );

  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-4">
          <TrackedOrgsDialog allCandidates={allCandidates} />
          <UserSearchDialog
            candidateAuthors={candidateAuthors}
            minActivityCount={minActivityCount}
          />
        </div>
      </div>
    </nav>
  );
};

export default Navbar;