import { Flex } from 'antd'
import { PropsWithChildren, ReactNode } from 'react';
import styles from './index.less'

/**
 * @description 卡片
 */

interface CustomCardProps {
  title?: string | ReactNode;
  width?: React.CSSProperties['width'];
  height?: React.CSSProperties['height'];
  style?: React.CSSProperties;
  titleStyle?: React.CSSProperties;
  extra?: ReactNode,
  className?: string;
}

const CustomCard: React.FC<PropsWithChildren<CustomCardProps>> = (props) => {
  const { width, height, style, children, title, extra, titleStyle } = props

  return (
    <div className={styles.wrap} style={{ width, height, ...style }}>
      {
        title && (
          <Flex justify='space-between' className={styles.header}>
            <Flex align='center' className={styles.titleBox}>
              <div className={styles.block}></div>
              <div className={styles.title} style={{ ...titleStyle }}>{title}</div>
            </Flex>
            {extra}
          </Flex>
        )
      }
      {children}
    </div>
  )
}

export default CustomCard