import React from 'react';
import { Col } from '../Col';
import { Row } from '../Row';

export interface IFormGroup {
  as?: React.ReactNode;
  className?: string;
  children: any;
  id?: string;
  inline?: boolean;
  xs?: number | string;
  sm?: number | string;
  md?: number | string;
  lg?: number | string;
  xl?: number | string;
  hide?: string | boolean;
  [x: string]: any;
}

export const FormGroup: React.FC<IFormGroup> = (props) => {
  const { as, children, className = '', id, inline, xs, sm, md, lg, xl, hide, ...otherProps } = props;

  if (as === Col) {
    return (
      <Col id={id} className={`b-form-group ${inline ? 'b-form-inline' : ''} ${className}`} xs={xs} sm={sm} md={md} lg={lg} xl={xl} hide={hide} {...otherProps}>
        {children}
      </Col>
    );
  } else if (as === Row) {
    return (
      <Row id={id} className={`b-form-group ${inline ? 'b-form-inline' : ''} ${className}`} {...otherProps}>
        {children}
      </Row>
    );
  } else {
    return (
      <div id={id} className={`b-form-group ${inline ? 'b-form-inline' : ''} ${className}`} {...otherProps}>
        {children}
      </div>
    );
  }
};