// @flow

import { makeStyles } from '@material-ui/styles';
import React from 'react';

type Props = {

    /**
     * Label used for accessibility.
     */
    accessibilityLabel: string,

    /**
     * Additional class name for custom styles.
     */
    className: string,

    /**
     * Children of the component.
     */
    children: string | React$Node,

    /**
     * Click handler.
     */
    onClick: Function,

    /**
     * Data test id.
     */
    testId?: string
}

const useStyles = makeStyles(theme => {
    return {
        button: {
            backgroundColor: theme.palette.action01,
            color: theme.palette.text01,
            borderRadius: `${theme.shape.borderRadius}px`,
            ...theme.typography.labelBold,
            lineHeight: `${theme.typography.labelBold.lineHeight}px`,
            padding: '8px 12px',
            display: 'flex',
            justifyContent: 'center',
            alignItems: 'center',
            border: 0,

            '&:hover': {
                backgroundColor: theme.palette.action01Hover
            }
        }
    };
});

const QuickActionButton = ({ accessibilityLabel, className, children, onClick, testId }: Props) => {
    const styles = useStyles();

    return (<button
        aria-label = { accessibilityLabel }
        className = { `${styles.button} ${className}` }
        data-testid = { testId }
        onClick = { onClick }>
        {children}
    </button>);
};

export default QuickActionButton;