import { View, Input, Text } from '@tarojs/components';
import SegmentTabs from '../../SegmentTabs';
import './index.scss';

interface SearchSectionProps {
  value: string;
  onChange: (v: string) => void;
  onSearch?: () => void;
  placeholder?: string;
  filters?: { key: string; label: string }[];
  activeFilter?: string;
  onFilterChange?: (key: string) => void;
}

const SearchSection: React.FC<SearchSectionProps> = ({
  value,
  onChange,
  onSearch,
  placeholder = '搜索...',
  filters,
  activeFilter,
  onFilterChange,
}) => {
  return (
    <View className="search-section">
      <View className="search-section__input-wrap">
        <Text className="search-section__icon">🔍</Text>
        <Input
          className="search-section__input"
          value={value}
          onInput={(e) => onChange(e.detail.value)}
          onConfirm={onSearch}
          placeholder={placeholder}
          placeholderClass="search-section__placeholder"
          confirmType="search"
        />
      </View>
      {filters && filters.length > 0 && (
        <View className="search-section__filters">
          <SegmentTabs
            tabs={filters.map((f) => ({ key: f.key, label: f.label }))}
            activeKey={activeFilter ?? filters[0]?.key ?? ''}
            onChange={onFilterChange ?? (() => {})}
            variant="pill"
          />
        </View>
      )}
    </View>
  );
};

export default React.memo(SearchSection);