import PropTypes from 'prop-types';
import React from 'react';
import { Divider, Tooltip, Stack, Typography } from '@mui/material';
import { InfoOutlined } from '@mui/icons-material';
import { isEmptyExceptNumber } from '../util';
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
export default function InfoMetric({
  value,
  label,
  tip = '',
  divider = false
}) {
  const isNone = isEmptyExceptNumber(value);
  return /*#__PURE__*/_jsxs(_Fragment, {
    children: [/*#__PURE__*/_jsxs(Stack, {
      direction: "column",
      alignItems: "flex-start",
      children: [/*#__PURE__*/_jsxs(Typography, {
        component: "div",
        variant: "body1",
        mb: 1,
        color: "text.primary",
        sx: {
          fontWeight: 500
        },
        children: [label, !!tip && /*#__PURE__*/_jsx(Tooltip, {
          title: tip,
          children: /*#__PURE__*/_jsx(InfoOutlined, {
            fontSize: "small"
          })
        })]
      }), /*#__PURE__*/_jsx(Typography, {
        component: "div",
        variant: "body1",
        color: isNone ? 'text.disabled' : 'text.secondary',
        sx: {
          width: '100%',
          minHeight: '24px'
        },
        children: isNone ? '-' : value
      })]
    }), divider && /*#__PURE__*/_jsx(Divider, {
      orientation: "vertical",
      flexItem: true
    })]
  });
}
InfoMetric.propTypes = {
  label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,
  value: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,
  tip: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
  divider: PropTypes.bool
};