/**
 * FeedType 为 table 时，展示 table 数据
 */
import { Box, Card, Tooltip } from '@mui/material';
import styled from '@emotion/styled';
import PropTypes from 'prop-types';
import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
import Img from '@arcblock/ux/lib/Img';
import { getProxyImageUrl } from '../utils';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
function TablePreviewPage({
  data,
  ...rest
}) {
  const {
    items
  } = data;
  return /*#__PURE__*/_jsx(Div, {
    ...rest,
    children: items.map(x => /*#__PURE__*/_jsxs(Card, {
      variant: "outlined",
      sx: {
        p: 2,
        borderRadius: '8px',
        minWidth: 128
      },
      children: [/*#__PURE__*/_jsxs(Box, {
        sx: {
          display: 'flex',
          alignItems: 'center',
          gap: 1
        },
        children: [x.icon ? /*#__PURE__*/_jsx(Img, {
          src: x.icon,
          alt: x.title,
          style: {
            width: 16,
            height: 16
          },
          fallback: getProxyImageUrl(x.icon)
        }) : null, /*#__PURE__*/_jsxs(Box, {
          className: "metric-name",
          sx: {
            display: 'flex',
            alignItems: 'center'
          },
          children: [x.title, x.subtitle ? /*#__PURE__*/_jsx(Tooltip, {
            title: x.subtitle,
            arrow: true,
            placement: "top",
            children: /*#__PURE__*/_jsx(InfoOutlinedIcon, {
              fontSize: "small",
              sx: {
                fontSize: 14,
                ml: 0.5
              }
            })
          }) : null]
        })]
      }), /*#__PURE__*/_jsxs(Box, {
        className: "metric-number",
        sx: {
          color: x.content_color || 'rgba(3, 7, 18, 1)'
        },
        children: [x.content, x.sub_content ? /*#__PURE__*/_jsxs("span", {
          className: "sub-content",
          style: {
            color: x.sub_content_color || 'rgba(156, 163, 175, 1)'
          },
          children: ["(", x.sub_content, ")"]
        }) : null]
      })]
    }, x.title))
  });
}
const Div = styled(Box)`
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 16px;
  .metric-number {
    font-size: 18px;
    font-weight: 600;
    .sub-content {
      font-size: 12px;
      font-weight: 400;
      margin-left: 4px;
    }
  }
  .metric-name {
    font-size: 14px;
    color: rgba(156, 163, 175, 1);
  }
`;
TablePreviewPage.propTypes = {
  data: PropTypes.object.isRequired
};
export default TablePreviewPage;