import React from 'react';
import { Card, Divider } from 'antd';
import styles from './index.less';
const DashedCard = (props: any) => {
  const {
    height = 232,
    width = 362,
    onClick,
    leftHeader,
    rightHeader,
    children,
    style,
    hoverable,
    dividerStyle = {},
    ...rest
  } = props;
  const newDividerStyle = {
    margin: '12px 0px 14px 0px',
    borderColor: 'rgba(0,0,0,.09)',
    ...dividerStyle
  };

  return (
    <div onClick={() => onClick?.()} className={styles.card} {...rest}>
      <Card
        hoverable={hoverable}
        style={{ width, height, position: 'relative', ...style }}
        bordered={false}
      >
        <div style={{ marginTop: -4 }}>
          {leftHeader}
          <span style={{ float: 'right' }}>{rightHeader}</span>
        </div>
        <Divider dashed style={newDividerStyle} />
        <div className={styles.bodyContainer}>{children}</div>
      </Card>
    </div>
  );
};

export default DashedCard;