import React, { useMemo } from 'react';
import Icon from '../Icon/index';

function LargeScreenComponentButton(props: ILargeScreenComponentButton) {
  const { icon, value, change, styles } = props;

  const Dom = useMemo(() => {
    return (
      <div className="zl-large-screen-component-button" style={{ ...styles }}>
        <span>
          <Icon name={icon} click={() => change()} />
          <span onClick={() => change()}>{value}</span>
        </span>
      </div>
    );
  }, [icon, value, styles]);

  return Dom;
}
export default LargeScreenComponentButton;

export interface ILargeScreenComponentButton {
  icon?: string;
  value?: string | React.ReactNode;
  change?: Function;
  styles?: React.CSSProperties;
}