import { withStyles } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';
import React from 'react';
import PropTypes from 'prop-types';

export const mainButtonStyle = theme => {
    const buttons = {
        mainBtn: {},
        mainBtnHover: {},
        ...theme.buttons,
    };

    return {
        root: {
            ...buttons.mainBtn,
            '&:hover': {
                ...buttons.mainBtnHover,
                cursor: 'pointer',
            },
            '@media (hover: none)': {
                '&:hover': {
                    ...buttons.mainBtn,
                },
            },
            flexDirection: 'column',
            alignItems: 'center',
            justifyContent: 'center',
        },
        label: {
            color: 'white',
            fontSize: 15,
            textTransform: 'none',
            whiteSpace: 'nowrap',
        },
    };
};

const MainButton = React.forwardRef(({ classes, ...props }, ref) => (
    <Button classes={classes} {...props} ref={ref} />
));

MainButton.propTypes = {
    classes: PropTypes.object,
};
MainButton.displayName = 'MainButton';

export default withStyles(mainButtonStyle, { name: 'MainButton' })(MainButton);
