import {Col, Row, Select as SelectOri} from 'antd';
import css from './index.module.css';
import {FC} from 'react';

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

const Select: FC<Props> = function({
  label,
  value,
  onChange,
  placeholder,
  name,
  options,
}) {
  function onSelectChange(value: string) {
    onChange(value);
  }

  return (
    <Col span={6}>
      <Row>
        <Col>
          <label htmlFor={`filter_${name}`} className={css.fieldLabel}>{label}: </label>
        </Col>
        <Col span={16}>
          <SelectOri
            style={{width: '100%'}}
            id={`filter_${name}`}
            data-testid={`filter_${name}`}
            placeholder={placeholder ?? '请输入'}
            value={value}
            options={options}
            onChange={onSelectChange}
            getPopupContainer={(node: HTMLElement) => node.parentNode as HTMLElement}
          />
        </Col>
      </Row>
    </Col>
  );
};

export default Select;
