import React, { useCallback, useMemo } from "react";
import Search from "../ui/inputs/Search";
import { CartIcon } from "../icons/ExportModuleIcons";

interface DashboardNavBarProps {
  page: React.ReactNode;
  handleProjectsSearch?: (inputValue: string) => Promise<void>;
  handleTrashSearch?: (inputValue: string) => Promise<void>;
  handleRecentProjectSearch?: (inputValue: string) => Promise<void>;
}

const DashboardNavBar: React.FC<DashboardNavBarProps> = ({
  page,
  handleProjectsSearch,
  handleTrashSearch,
  handleRecentProjectSearch,
}) => {
  // Determine active search handler
  const activeSearchHandler = useMemo(
    () => handleProjectsSearch || handleTrashSearch || handleRecentProjectSearch,
    [handleProjectsSearch, handleTrashSearch, handleRecentProjectSearch]
  );

  const handleSearch = useCallback(
    async (inputValue: string) => {
      if (!activeSearchHandler) return;
      try {
        await activeSearchHandler(inputValue);
      } catch (error) {
        console.error("Search failed:", error);
      }
    },
    [activeSearchHandler]
  );

  return (
    <div className="dashboard-navbar-container">
      <div className="title">{page}</div>
      <div className="market-place-button">
        <CartIcon isActive /> Market Place
      </div>
      <Search onChange={handleSearch} />
    </div>
  );
};

export default DashboardNavBar;
