import React from 'react';

export interface IndicatorSettingsListSearchProps {
  value: string;
  onChange: (value: string) => void;
  totalCount: number;
  filteredCount: number;
  className?: string;
}

/** 보조지표 설정 목록 상단 검색 (지표 추가 팝업과 동일 UX) */
const IndicatorSettingsListSearch: React.FC<IndicatorSettingsListSearchProps> = ({
  value,
  onChange,
  totalCount,
  filteredCount,
  className = '',
}) => (
  <div className={`ind-settings-search-wrap ${className}`.trim()}>
    <input
      type="search"
      className="modal-search-input ind-settings-search-input"
      placeholder="지표 검색... (이름·한글명·약어)"
      value={value}
      onChange={e => onChange(e.target.value)}
      aria-label="보조지표 검색"
    />
    <span className="ind-settings-search-meta">
      {value.trim()
        ? `검색 결과 ${filteredCount} / ${totalCount}`
        : `전체 ${totalCount}개`}
    </span>
  </div>
);

export default IndicatorSettingsListSearch;