import React, { memo } from 'react';
import { Button } from '@easyv/antd';
import lazyWithPreload from '../../../lazyWithPreload';
import {getAssetsUrl} from 'utils/utils';

import styles from './TemplatePreview.less';

const ScreenEdit = lazyWithPreload(() => import('../../screen-edit'));

function TemplatePreview({ cover, description = '在空白画布上尽情施展您的创意吧！', addScreen }) {
  return (
    <div className={styles.container} onMouseEnter={() => ScreenEdit.preload()}>
      <div
        className={styles.cover}
        style={{
          backgroundImage: cover ? `url(${getAssetsUrl(cover)})` : undefined
        }}>
        <Button type="primary" onClick={addScreen} style={{ width: 90 }}>
          创建大屏
        </Button>
      </div>
      <div className={styles.footer}>{description}</div>
    </div>
  );
}

export default memo(TemplatePreview);
