client/src/components/SearchBar.tsx

import { Search, X } from "lucide-react";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";

interface SearchBarProps {
  projectName: string;
  moldId: string;
  onProjectNameChange: (value: string) => void;
  onMoldIdChange: (value: string) => void;
  onClear: () => void;
  hasActiveFilters: boolean;
}

export default function SearchBar({
  projectName,
  moldId,
  onProjectNameChange,
  onMoldIdChange,
  onClear,
  hasActiveFilters,
}: SearchBarProps) {
  return (
    <div className="sticky top-0 z-50 bg-white border-b border-slate-200 shadow-sm">
      <div className="container py-4">
        <div className="flex items-center gap-4">
          <div className="flex-1 flex items-center gap-3">
            {/* Project Name Search */}
            <div className="flex-1 relative">
              <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-slate-400" />
              <Input
                type="text"
                placeholder="搜索项目名称..."
                value={projectName}
                onChange={(e) => onProjectNameChange(e.target.value)}
                className="pl-10 h-11 text-base"
              />
            </div>

            {/* Mold ID Search */}
            <div className="flex-1 relative">
              <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-slate-400" />
              <Input
                type="text"
                placeholder="搜索模具编号..."
                value={moldId}
                onChange={(e) => onMoldIdChange(e.target.value)}
                className="pl-10 h-11 text-base"
              />
            </div>
          </div>

          {/* Clear Button */}
          {hasActiveFilters && (
            <Button
              variant="outline"
              onClick={onClear}
              className="h-11 px-4"
            >
              <X className="h-4 w-4 mr-2" />
              清除搜索
            </Button>
          )}
        </div>

        {/* Active Filters Display */}
        {hasActiveFilters && (
          <div className="mt-3 flex items-center gap-2 text-sm text-slate-600">
            <span className="font-medium">当前筛选:</span>
            {projectName && (
              <span className="px-2 py-1 bg-blue-50 text-blue-700 rounded">
                项目名称: {projectName}
              </span>
            )}
            {moldId && (
              <span className="px-2 py-1 bg-blue-50 text-blue-700 rounded">
                模具编号: {moldId}
              </span>
            )}
          </div>
        )}
      </div>
    </div>
  );
}