import { ExclamationCircleOutlined } from "@ant-design/icons"
import React from "react"
import style from './index.less'

interface BcProps {
    name?: string | JSX.Element,
    children?: JSX.Element | string,
    tips?: string,
    footTips?: string,
    flex?: 'flex-start' | 'center' | 'flex-end'
}
const BcForm: React.FC<BcProps> = (props) => {
    let { name = '', children = '', tips, footTips, flex = 'center' } = props
    return <div className={style.form}>
        <div className={style.content} style={{ alignItems: flex }}>
            <div className={style.label}><label>{name}</label></div>
            <div className={style.control}>
                <div className={style.children}>
                    {children}
                    {footTips && <div className={style.tips} style={{ margin: '5px 0 0 0' }}>{footTips}</div>}
                </div>
                {tips && <div className={style.tips}><ExclamationCircleOutlined style={{ color: '#FA8C16', marginRight: 10 }} />{tips}</div>}
            </div>
        </div>
    </div>
}

export default React.memo(BcForm)