import React from 'react';
import { makeStyles, Typography, Divider, Link } from '@material-ui/core';
import { StatusChip } from './status/StatusChip';
import clsx from 'clsx';
const useStyles = makeStyles((theme) => ({
    root: {},
    wrapper: {
        display: 'flex',
        flexDirection: 'row',
        padding: theme.spacing(1),
        lineHeight: 2
    },
    value: {
        flex: 1
    }
}));
export const FluentListElement = ({ subject, value, className, status, anchor = false, href }) => {
    const classes = useStyles();
    return (React.createElement("div", { className: clsx(classes.root, className) }, React.createElement("div", { className: classes.wrapper }, React.createElement(Typography, { className: classes.value, variant: "body2" }, subject, " ", subject && ':'), status && React.createElement(StatusChip, { status: status, label: value }), anchor && href ?
        React.createElement(Link, { href: href, variant: "body2", underline: "hover", target: "_blank", rel: "noopener noreferrer" }, React.createElement("strong", null, value))
        :
            !status ?
                React.createElement(Typography, { variant: "body2" }, React.createElement("strong", null, value))
                :
                    null), React.createElement(Divider, null)));
};
//# sourceMappingURL=FluentListElement.js.map