import React, { FC, useContext } from 'react';
import { ConfigContext } from '../config-provider';

import { AnnotatedSection, Section } from './components';

export interface NewLayoutProps {
  /** 是否有 padding */
  sectioned?: boolean;
}

const NewLayout: FC<NewLayoutProps> & {
  AnnotatedSection: typeof AnnotatedSection;
  Section: typeof Section;
} = ({ sectioned, children }) => {
  const { getPrefixCls } = useContext(ConfigContext);
  const prefixCls = getPrefixCls('new-layout');

  const content = sectioned ? <Section>{children}</Section> : children;
  return <div className={prefixCls}>{content}</div>;
};

NewLayout.AnnotatedSection = AnnotatedSection;
NewLayout.Section = Section;

export default NewLayout;