Projects/front/src/components/gap-analysis/GraphSearchBar.tsx

// src/components/gap-analysis/GraphSearchBar.tsx
import { Search, Filter } from "lucide-react";
import type { GraphNodeType } from "@/types/gap-analysis";

interface GraphSearchBarProps {
  value: string;
  onChange: (val: string) => void;
  filterType: GraphNodeType | "all";
  onFilterChange: (type: GraphNodeType | "all") => void;
}

const FILTER_OPTIONS: { value: GraphNodeType | "all"; label: string }[] = [
  { value: "all", label: "All" },
  { value: "paper", label: "Papers" },
  { value: "concept", label: "Concepts" },
  { value: "method", label: "Methods" },
  { value: "finding", label: "Findings" },
  { value: "gap", label: "Gaps" },
  { value: "hypothesis", label: "Hypotheses" },
];

export function GraphSearchBar({ value, onChange, filterType, onFilterChange }: GraphSearchBarProps) {
  return (
    <div className="flex items-center gap-2 w-full">
      <div className="relative flex-1">
        <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
        <input
          type="text"
          value={value}
          onChange={(e) => onChange(e.target.value)}
          placeholder="Search nodes..."
          className="w-full pl-8 pr-3 py-2 text-sm bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl focus:ring-2 focus:ring-primary focus:outline-none shadow"
        />
      </div>
      <select
        value={filterType}
        onChange={(e) => onFilterChange(e.target.value as any)}
        className="text-xs px-3 py-2 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl shadow focus:ring-2 focus:ring-primary"
      >
        {FILTER_OPTIONS.map((opt) => (
          <option key={opt.value} value={opt.value}>{opt.label}</option>
        ))}
      </select>
    </div>
  );
}