import React, { useState } from 'react';
import clsx from 'clsx';
import { Link, lighten, makeStyles, Typography } from '@material-ui/core';
const useStyles = makeStyles((theme) => ({
    root: {
        display: 'flex'
    },
    labelRoot: {
        color: 'inherit',
        marginRight: theme.spacing(0.5),
        opacity: 0.6
    },
    valueRoot: {
        color: 'inherit'
        // fontWeight: theme.typography.fontWeightMedium,
    },
    link: {
        color: 'inherit',
        textDecoration: 'none',
        '&:hover': {
            textDecoration: 'underline'
        }
    }
}));
export const EntityHeaderListItem = (props) => {
    const { label, value, link, hideLabelSeperator = false, disablePadding = false } = props;
    const classes = useStyles(props);
    return (React.createElement("div", { className: clsx({
            [classes.root]: true,
            [classes.rootPadding]: !disablePadding
        }) }, !!label && (React.createElement(Typography, { variant: 'body1', className: classes.labelRoot }, label, !hideLabelSeperator && ':')), !!value && (React.createElement(Typography, { variant: 'body1', className: clsx({
            [classes.valueRoot]: true,
            [classes.valueFontWeigth]: true
        }) }, link ? (React.createElement(Link, { href: link, className: classes.link, target: "_blank" }, value)) : (value)))));
};
//# sourceMappingURL=EntityHeaderListItem.js.map