import * as React from 'react';
import { FastTooltip, FastIcon } from 'components/ui';
import { isString } from 'utils/isType';
import { Component } from 'components/types';

function ModuleBox({ config, children }: {
  config: Component.Business.ModuleConfig,
  children: any
}) {
  const {
    uuid,
    name,
    desc = '',
  } = config;

  const renderDesc = () => {
    if (isString(desc)) {
      return `（${desc}）`;
    }
    if ((desc as Component.Business.Desc).type === 'normal' && (desc as Component.Business.Desc).text) {
      return `（${(desc as Component.Business.Desc).text}）`;
    }
    return (
      <FastTooltip title={(desc as Component.Business.Desc).text}>
        <FastIcon.QuestionCircleOutlined className="ml-4" />
      </FastTooltip>
    );
  };

  return (
    <div key={uuid} className="mt-8 mr-8 p-16 bg-white border-radius-8">
      {name ? (
        <h2 className="mb-8">
          <strong>{name}</strong>
          <span className="fs-14">{desc ? renderDesc() : null}</span>
        </h2>
      ) : null}
      <div>{children}</div>
    </div>
  );
}

export default ModuleBox;