import PropTypes from 'prop-types';
import Box from '@mui/material/Box';
import Typography from '@mui/material/Typography';
import Chip from '@mui/material/Chip';
import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
import { getStatusPreview } from '../utils';
import StatusDot from '../status-dot';
import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
SendStatusFilterRender.propTypes = {
  list: PropTypes.array.isRequired,
  label: PropTypes.string.isRequired,
  onDelete: PropTypes.func
};
export default function SendStatusFilterRender({
  list,
  label,
  onDelete = () => {}
}) {
  const {
    t,
    locale
  } = useLocaleContext();
  return /*#__PURE__*/_jsxs(Box, {
    sx: {
      display: 'flex',
      gap: 1,
      alignItems: 'center'
    },
    children: [/*#__PURE__*/_jsxs(Typography, {
      children: [label, ": "]
    }), list.map(status => {
      const result = getStatusPreview(t, locale, {
        status
      });
      return /*#__PURE__*/_jsx(Chip, {
        size: "small",
        label: /*#__PURE__*/_jsx(Box, {
          sx: {
            display: 'flex',
            alignItems: 'center',
            gap: '4px'
          },
          children: /*#__PURE__*/_jsx(StatusDot, {
            config: result,
            enableTooltip: false,
            children: result.title
          })
        }),
        onDelete: e => onDelete(e, status)
      }, status);
    })]
  });
}