import React from 'react';
import { Box, Typography, useTheme } from '@material-ui/core';
import { PropTypes } from 'prop-types';
export const AmbientCardTitle = (props) => {
    const theme = useTheme();
    const { title, color, backgroundColor = theme.palette.background.paper, variant = 'h6', style, textStyle, children } = props;
    return (React.createElement(Box, { display: "flex", alignItems: "flex-start", style: Object.assign({ width: '100%', padding: '8px 16px', backgroundColor: backgroundColor }, style) }, React.createElement(Typography, { variant: variant, style: Object.assign({ color }, textStyle) }, title), children && children));
};
AmbientCardTitle.propTypes = {
    /** @type {?string} title text */
    title: PropTypes.string.isRequired,
    /** @type {?string} color text by default #FFF */
    color: PropTypes.string,
    /** @type {?string} optional backgroundColor */
    backgroundColor: PropTypes.string,
    /** @type {?elementType} variant values for material ui ->
    | 'h1'
    | 'h2'
    | 'h3'
    | 'h4'
    | 'h5'
    | 'h6'
    | 'subtitle1'
    | 'subtitle2'
    | 'body1'
    | 'body2'
    | 'caption'
    | 'button'
    | 'overline'*/
    variant: PropTypes.elementType,
    /** @type {?object} optional additional css properties */
    style: PropTypes.object,
    /** @type {?object}  additional text style properties */
    textStyle: PropTypes.object,
    /** @type {?elementType} optional children element */
    children: PropTypes.elementType
};
//# sourceMappingURL=AmbientCardTitle.js.map