import React from 'react';
import { Append, IAppend } from './Append';
import { Prepend, IPrepend } from './Prepend';
import { Text, IText } from './Text';

export interface IInputGroup {
  className?: any;
  size?: 'sm' | 'lg';
  [x: string]: any;
}

export interface IInputGroupSubComponents {
  Prepend: React.FC<IPrepend>;
  Append: React.FC<IAppend>;
  Text: React.FC<IText>;
}

export const InputGroup: React.FC<IInputGroup> & IInputGroupSubComponents = (props) => {
  const { children, className = '', size, ...otherProps } = props;
  return (
    <div className={`b-input-group ${size ? `b-input-group-${size}` : ''} ${className}`} {...otherProps}>
      {children}
    </div>
  );
};
InputGroup.Append = Append;
InputGroup.Prepend = Prepend;
InputGroup.Text = Text;