import classNames from 'classnames';
import React from 'react';

import './index.less';

interface IProps extends React.PropsWithChildren {
  title: string;
  subTitle?: string | boolean;
  optional?: boolean;
  dynamicHeight?: boolean;
  className?: string;
  contentClassName?: string;
}

const PREFIX = 'bl-form-item';

function BlFormItem(props: IProps) {
  const {
    children,
    className,
    contentClassName,
    title,
    subTitle = true,
    optional = false,
    dynamicHeight = false,
  } = props;
  return (
    <div className={classNames(PREFIX, className)}>
      <div className={`${PREFIX}__header`}>
        <div className={`${PREFIX}__header__title`}>{title}</div>
        {subTitle !== false && (
          <div
            className={`${PREFIX}__header__type`}
          >{`(${typeof subTitle === 'string' ? subTitle : optional ? '建议填写' : '必填'})`}</div>
        )}
      </div>
      <div className={classNames(`${PREFIX}__content`, contentClassName, { dynamicHeight })}>{children}</div>
    </div>
  );
}

export default BlFormItem;