import { ChangeEvent } from 'react';

export interface FilterInputProps {
  title: string;
  inputValue: string;
  inputSetter: (value: any) => void;
};
export const FilterInput = ({
  title,
  inputValue,
  inputSetter
}: FilterInputProps) => {

  return (
    <>
      <div className="opt-field">
        <div 
          className="opt-label"
          style={{ fontSize: 'var(--fs-14)' }}
        >{ title }</div>
        <div className="opt-controls">
          <input
            className="flex-1"
            type="text"
            placeholder=""
            value={ inputValue }
            onChange={ (e: ChangeEvent<HTMLInputElement>) => inputSetter(e.target.value)}
          />
        </div>
      </div>
    </>
  );
};