/*
 * @Description: 头部滚动提示条
 * @Author: taosu
 * @Date: 2021-11-10 14:36:09
 */
import React from 'react';
import { Alert } from '@easyv/antd';
import ReactSeamlessScroll from 'components/SeamlessScroll';
import styles from './index.less';
import classNames from 'classnames';
import { NotificationFilled } from '@easyv/react-icons';

interface IProps {
  data?: string; // 显示的数据
  closable?: boolean; // 是否显示关闭按钮
  type?: 'layout' | 'all' | 'other'; //渲染类型，分为有左侧边栏和没有
  style?: React.CSSProperties;
  icon?: React.ReactNode;
  onClose?: () => void;
  theme?: 'info' | 'error'; // 主题风格
}

const AlertScroll = (props: IProps) => {
  const { type = 'layout', closable = true, style, data, icon = <NotificationFilled />, onClose, theme = 'error' } = props;

  return (
    <div>
      <div
        className={classNames(
          { [styles.alertWrapperLay]: type === 'layout' },
          { [styles.alertWrapperAll]: type === 'all' },
          { [styles.alertWrapperOther]: type === 'other' },
          styles[theme]
        )}
        style={style}>
        <Alert
          className={styles.alert}
          message={
            <ReactSeamlessScroll mode="horizontal" speed={30}>
              <p>{data}</p>
            </ReactSeamlessScroll>
          }
          icon={icon}
          type="info"
          banner
          showIcon
          closable={closable}
          afterClose={onClose}
        />
      </div>
    </div>
  );
};

export default AlertScroll;
