import React, { Fragment } from 'react';
import { makeStyles, CardContent, Divider, lighten, Typography } from '@material-ui/core';
import { LayoutUnit } from '../../../layout/LayoutUnit';
import { FluentCard } from './fluentCards/FluentCard';
import PropTypes from 'prop-types';
import clsx from 'clsx';
const useStyles = makeStyles((theme) => ({
    root: {},
    paper: {
        background: lighten(theme.palette.info.light, 0.8),
        borderTop: `5px solid ${theme.palette.info.main} `
    },
    title: {
        color: theme.palette.info.dark,
        highlightfontWeight: 400,
        lineHeight: 1.6
    },
    subHeader: {
        lineHeight: 1.6,
        fontWeight: 600
    }
}));
export const InfoCard = ({ children, title, subTitle, relatedTopics, label, headerComponent = 'h2', subHeaderComponent = 'h3', size, titleVariant = 'h6', className, titleHeight }) => {
    const classes = useStyles();
    return (React.createElement(FluentCard, { elevation: 0, classes: { root: classes.paper }, className: clsx(classes.root, className) }, React.createElement(CardContent, null, React.createElement(Typography, { variant: titleVariant, component: headerComponent, className: clsx(classes.title, titleHeight) }, title), size === 'standard' && React.createElement(LayoutUnit, { unit: "xxs" }), React.createElement(Typography, { variant: "subtitle2", component: subHeaderComponent, className: classes.subHeader }, subTitle), children, size === 'standard' && React.createElement(LayoutUnit, { unit: "xxs" }), relatedTopics && (React.createElement(Fragment, null, React.createElement(Divider, null), React.createElement(LayoutUnit, { unit: "xxs" }), React.createElement(Typography, { variant: "caption" }, label || 'Related Topics'), React.createElement(LayoutUnit, { unit: "xxs" }), relatedTopics)))));
};
InfoCard.propTypes = {
    /**
     * Main content for the card
     */
    children: PropTypes.oneOfType([
        PropTypes.arrayOf(PropTypes.node),
        PropTypes.node
    ]),
    /**
     * Card title
     */
    title: PropTypes.string.isRequired,
    /**
     * Optional card subtitle
     */
    subTitle: PropTypes.string,
    /**
     * Option list of related topics
     */
    relatedTopics: PropTypes.oneOfType([
        PropTypes.arrayOf(PropTypes.node),
        PropTypes.node
    ]),
    /**
     * Title for related topics or alt title
     */
    label: PropTypes.string,
    /**
     * Change semantic header of card title
     */
    headerComponent: PropTypes.string,
    /**
     * Change semantic header of card subtitle
     */
    subHeaderComponent: PropTypes.string,
    /**
     * Card size override for dense card
     */
    size: PropTypes.oneOf(['standard'])
};
InfoCard.defaultProps = {
    headerComponent: 'h2',
    subHeaderComponent: 'h3',
    size: 'standard'
};
//# sourceMappingURL=InfoCard.js.map