import css from './index.module.css';
import {Input} from 'antd';
import {ChangeEventHandler, FC} from 'react';

type Props = {
  label: string;
  name: string;
  value: string;
  onChange?: (value: string) => void;
  placeholder?: string;
};

const FilterField: FC<Props> = function ({
  label,
  name,
  placeholder,
  value,
  onChange,
}) {
  const onInputChange: ChangeEventHandler<{value: string}> = function (e) {
    onChange?.(e.target.value);
  };

  return (
    <div className={css.field}>
      <label htmlFor={`filter_${name}`} className={css.fieldLabel}>
        {label}
      </label>
      <div className={css.fieldWrapper}>
        <Input
          id={`filter_${name}`}
          data-testid={`filter_${name}`}
          name={name}
          placeholder={placeholder ?? '请输入'}
          value={value}
          onChange={onInputChange}
        />
      </div>
    </div>
  );
};

export default FilterField;
