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

export interface AnnotatedSectionProps {
  /** 标题 */
  title?: React.ReactNode;
  /** 描述 */
  description?: React.ReactNode;
}

export const AnnotatedSection: FC<AnnotatedSectionProps> = props => {
  const { children, title, description } = props;

  const { getPrefixCls } = useContext(ConfigContext);
  const prefixCls = getPrefixCls('new-layout');

  const descriptionMarkup = typeof description === 'string' ? <p>{description}</p> : description;

  return (
    <div className={`${prefixCls}-annotated-section`}>
      <div className={`${prefixCls}-annotation-wrapper`}>
        <div className={`${prefixCls}-annotation`}>
          <div className={`${prefixCls}-text-container`}>
            <h2 className={`${prefixCls}-heading`}>{title}</h2>
            {descriptionMarkup && (
              <div className={`${prefixCls}-annotation-description`}>{descriptionMarkup}</div>
            )}
          </div>
        </div>

        <div className={`${prefixCls}-annotation-content`}>{children}</div>
      </div>
    </div>
  );
};