import { Search, X } from 'lucide-react';
import { IconButton } from '../../components/ui';
export function TreeSearchField({
  value,
  onChange,
  resultCount,
  placeholder = '搜索…',
  label = '搜索树',
}: {
  value: string;
  onChange: (value: string) => void;
  resultCount?: number;
  placeholder?: string;
  label?: string;
}) {
  return (
    <div className="m-2">
      <div className="relative">
        <Search
          aria-hidden="true"
          className="pointer-events-none absolute left-2 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-text-tertiary"
        />
        <input
          type="search"
          aria-label={label}
          value={value}
          onChange={(event) => onChange(event.target.value)}
          placeholder={placeholder}
          className="h-8 w-full rounded-md border border-border bg-input pl-7 pr-8 text-xs text-text-primary placeholder:text-text-tertiary focus-visible:ring-2 focus-visible:ring-accent/35"
        />
        {value && (
          <span className="absolute right-0.5 top-0.5">
            <IconButton aria-label="清除搜索" tooltip="清除搜索" onClick={() => onChange('')}>
              <X className="h-3.5 w-3.5" />
            </IconButton>
          </span>
        )}
      </div>
      {value && resultCount !== undefined && (
        <p role="status" className="px-1 pt-1.5 text-[10px] text-text-tertiary">
          找到 {resultCount} 个匹配项
        </p>
      )}
    </div>
  );
}