import React from 'react';
import { makeStyles, Divider, Typography } from '@material-ui/core';
import { FluentIconButton } from '../../inputs/buttons/FluentIconButton';
import { StatusChip } from '../status/StatusChip';
import { ArrowUpRightIcon } from '@fluentui/react-icons';
import PropTypes from 'prop-types';
const useStyles = makeStyles((theme) => ({
    root: {
        width: '100%',
        height: 44
    },
    wrapper: { display: 'flex' },
    labelCount: {
        flex: 1,
        display: 'flex'
    },
    status: {
        marginRight: theme.spacing(1)
    },
    icon: {
        marginRight: theme.spacing(1)
    }
}));
export const StatusLineItem = ({ label, amount, status, icon, handleClick }) => {
    const classes = useStyles();
    return (React.createElement("div", { className: classes.root }, React.createElement("div", { className: classes.wrapper }, React.createElement("div", { className: classes.labelCount }, React.createElement("div", { className: classes.icon }, " ", icon, " "), React.createElement(Typography, null, " ", label, " ")), React.createElement("div", { className: classes.status }, status === 'error' && React.createElement(StatusChip, { label: amount, status: status }), status !== 'error' && amount), React.createElement(FluentIconButton, { onClick: handleClick, className: classes.launch, icon: ArrowUpRightIcon, "aria-label": "launch" })), React.createElement(Divider, null)));
};
StatusLineItem.propTypes = {
    /**
     * stat label
     */
    label: PropTypes.string.isRequired,
    /**
     * Total amount stat
     */
    amount: PropTypes.number,
    /**
     * Type of status for status chip
     */
    status: PropTypes.string,
    /**
     * list icon
     */
    icon: PropTypes.node,
    /**
     * onClick event
     */
    handleClick: PropTypes.func
};
//# sourceMappingURL=StatusLineItem.js.map