import React from 'react';
import { withStyles } from '@material-ui/core/styles';
import clsx from 'clsx';

import { t } from 'Framework/i18n';
import MainButton from 'Shared/Components/MainButton';
import customClassName from 'App/Utils/customClassName';

const styles = theme => ({
    button: {
        pointerEvents: 'all',
        [theme.breakpoints.up('sm')]: {
            marginBottom: 16,
            minHeight: 40,
        },
        [theme.breakpoints.down('xs')]: {
            height: 56,
        },
    },
});

export const CloseGraphicsEditorButton = withStyles(styles, { name: 'CloseGraphicsEditorButton' })(
    ({ closeDesignArea, classes }) => (
        <MainButton
            onClick={closeDesignArea}
            size="medium"
            fullWidth
            variant="contained"
            className={clsx(classes.button, customClassName('open-editor-button'))}
        >
            {t('designAreaControlBox.backToProductView')}
        </MainButton>
    )
);

export default CloseGraphicsEditorButton;
