import React, { FC, useContext } from 'react';

import classNames from 'classnames';
import { ConfigContext } from '../../../config-provider';

export interface SectionProps {
  /** 次卡片 */
  secondary?: boolean;
  /** 宽度充满父级 */
  fullWidth?: boolean;
  /** 宽度一半 */
  oneHalf?: boolean;
  /** 宽度三分之一 */
  oneThird?: boolean;
}

export const Section: FC<SectionProps> = ({
  children,
  secondary,
  fullWidth,
  oneHalf,
  oneThird,
}) => {
  const { getPrefixCls } = useContext(ConfigContext);
  const prefixCls = getPrefixCls('new-layout');

  const className = classNames({
    [`${prefixCls}-section`]: true,
    [`${prefixCls}-section-secondary`]: secondary,
    [`${prefixCls}-section-fullWidth`]: fullWidth,
    [`${prefixCls}-section-one-half`]: oneHalf,
    [`${prefixCls}-section-one-third`]: oneThird,
  });

  return <div className={className}>{children}</div>;
};