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

/**
 * @description 基础卡片
 */

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

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

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

export default BaseCard