import React, { useState } from 'react';
import PropTypes from 'prop-types';
import style from './style/floatingbutton.module.scss';
import MDIcon from '../icon/index';
import palette from './style/floatingbutton.palette.module.scss';

const MDFloatingButton = React.forwardRef((props, ref) => {
  const children = props.children;

  return (
    <div
      className={`${
        !props.mini ? style.MDFloatingButton : style.MDFloatingButtonMini
      } ${palette.MDFloatingButton} ${props.className}`}
      style={{background: `${props.accentColor}`}}
      onClick={onClick}
    > 
      <button className={style.Content} ref={ref}>
        {<MDIcon icon={icon} color='#767676'/>}
      </button>
    </div>
  );
});

MDFloatingButton.propTypes = {
  children: PropTypes.any,
  mini: PropTypes.bool,
  className: PropTypes.string,
  icon: PropTypes.string,
  color: PropTypes.string,
  onClick: PropTypes.func,
  accentColor: PropTypes.string
};

MDFloatingButton.defaultProps = {
  mini: false,
  icon : '',
  className: '',
  children: [],
  onClick: null,
  accentColor: '',
  color: ''
};

export { MDFloatingButton };
export default MDFloatingButton;
