import React, { useState, useEffect } from 'react';
import { makeStyles, CardContent, Typography, Avatar, Chip, Divider, lighten } from '@material-ui/core';
import { FluentCard } from './fluentCards/FluentCard';
import { CopyIcon, CheckMarkIcon } from '@fluentui/react-icons';
import clsx from 'clsx';
const useStyles = makeStyles((theme) => ({
    root: {
        width: '100%',
        height: '100%'
    },
    large: {
        width: theme.spacing(12),
        height: theme.spacing(12),
        border: `3px solid ${theme.palette.primary.main}`
    },
    info: {
        display: 'flex',
        marginTop: theme.spacing(3)
    },
    header: {
        display: 'flex'
    },
    addressContainer: {
        maxWidth: theme.spacing(16),
        alignContent: 'center',
        marginLeft: theme.spacing(3),
        marginBottom: theme.spacing(3)
    },
    lastName: {
        marginTop: theme.spacing(-1)
    },
    name: {
        flex: 1
    },
    chip: {
        background: lighten(theme.palette.success.light, 0.7)
    }
}));
export const BioCard = ({ children, avatar, alt, firstName, lastName, address, copy, className }) => {
    const classes = useStyles();
    const [state, setState] = useState({
        value: '',
        copied: false
    });
    useEffect(() => {
        setState({ value: copy });
    }, [copy]);
    return (React.createElement(FluentCard, { className: clsx(classes.root, className) }, React.createElement(CardContent, null, React.createElement("div", { className: classes.header }, React.createElement("div", { className: classes.name }, React.createElement(Typography, { variant: "h4" }, firstName, " "), React.createElement("div", { className: classes.lastName }, React.createElement(Typography, { className: classes.overline, variant: "overline" }, lastName))), state.copied && (React.createElement("div", null, React.createElement(Chip, { label: "Copied", avatar: React.createElement(CheckMarkIcon, null), variant: "outlined", className: classes.chip, size: "small" })))), React.createElement("div", { className: classes.info }, React.createElement("div", { className: classes.avatarWrapper }, React.createElement(Avatar, { className: classes.large, alt: alt, src: avatar })), React.createElement("div", { className: classes.addressContainer }, address))), children && React.createElement(Divider, null), React.createElement(CardContent, null, children)));
};
//# sourceMappingURL=BioCard.js.map