import { RightOutlined } from '@ant-design/icons';
import { Flex } from 'antd';
import React, { PropsWithChildren } from 'react';
import styles from './index.less';

interface PropsType {
  title: string;
  onMore?(): void;
}

const Card: React.FC<PropsWithChildren<PropsType>> = (props) => {
  const { title, onMore, children } = props;
  return (
    <div className={styles.container}>
      <Flex align="center" justify="space-between">
        <div className={styles.cardTitle}>{title}</div>
        <div className={styles.rightBtn} onClick={onMore}>
          <RightOutlined style={{ color: '#fff', fontSize: 14 }} />
        </div>
      </Flex>
      <div>{children}</div>
    </div>
  );
};

export default Card;
