import React from 'react';
import { ViewContent, IViewContent } from './ViewContent';
import { ViewHeader, IViewHeader } from './ViewHeader';

export interface IView {
  className?: any;
  [x: string]: any;
}

export interface IViewSubComponents {
  Content: React.FC<IViewContent>;
  Header: React.FC<IViewHeader>;
}

export const View: React.FC<IView> & IViewSubComponents = (props) => {
  const { children, className = '', ...otherProps } = props;
  return (
    <div className={`b-view ${className}`} {...otherProps}>
      {children}
    </div>
  );
};
View.Content = ViewContent;
View.Header = ViewHeader;