"use client";
import { Button } from "@/components/ui/button";
import SearchBar from "./SearchBar";
import { PlusIcon } from "lucide-react";

interface TopHeaderProps {
  title?: string;
  itemCount?: number;
  onAddNew?: () => void;
  addButtonText?: string;
}

const TopHeader = ({ title, itemCount, onAddNew, addButtonText = "Add New" }: TopHeaderProps) => {
  return (
    <div className="flex flex-col gap-4 p-4">
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-2">
          <h2 className="text-xl font-semibold tracking-tight">{title}</h2>
          {itemCount !== undefined && (
            <span className="flex items-center justify-center bg-secondary text-secondary-foreground min-w-[24px] h-[24px] px-2 text-xs font-bold rounded-full">
              {itemCount}
            </span>
          )}
        </div>

        {onAddNew && (
          <Button 
            onClick={onAddNew}
            size="sm"
            className="flex items-center gap-2"
          >
            <PlusIcon className="w-4 h-4" />
            {addButtonText}
          </Button>
        )}
      </div>

      <div className="flex w-full max-w-sm ml-auto">
        <SearchBar />
      </div>
    </div>
  );
};

export default TopHeader;