import css from './index.module.css';
import {Col, Row, 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 (
    <Col span={6}>
      <Row>
        <Col>
          <label htmlFor={`filter_${name}`} className={css.fieldLabel}>{label}: </label>
        </Col>
        <Col span={16}>
          <Input
            id={`filter_${name}`}
            name={name}
            placeholder={placeholder ?? '请输入'}
            value={value.length ? value : void 0}
            onChange={onInputChange}
          />
        </Col>
      </Row>
    </Col>
  );
};

export default FilterField;
