/**
 * FeedType 为 graphic | gallery 时
 */
import PropTypes from 'prop-types';
import ImageList from '@mui/material/ImageList';
import ImageListItem from '@mui/material/ImageListItem';
import useMediaQuery from '@mui/material/useMediaQuery';
import Img from '@arcblock/ux/lib/Img';
import { getProxyImageUrl } from '../utils';
import { jsx as _jsx } from "react/jsx-runtime";
function GraphicPreviewPage({
  data
}) {
  const {
    items
  } = data;
  const isSm = useMediaQuery(theme => theme.breakpoints.down('sm'));
  const isMd = useMediaQuery(theme => theme.breakpoints.down('md'));
  const isLg = useMediaQuery(theme => theme.breakpoints.down('lg'));
  const cols = () => {
    if (isSm) return 1;
    if (isMd) return 3;
    if (isLg) return 4;
    return 6;
  };
  return /*#__PURE__*/_jsx(ImageList, {
    variant: "quilted",
    cols: cols(),
    gap: 8,
    rowHeight: 128,
    sx: {
      margin: 0
    },
    children: items.map(x => {
      const img = x.cover || x.display;
      if (img) {
        return /*#__PURE__*/_jsx("a", {
          href: x.link,
          target: "_blank",
          rel: "noopener noreferrer",
          children: /*#__PURE__*/_jsx(ImageListItem, {
            children: /*#__PURE__*/_jsx(Img, {
              src: img,
              alt: x.title || '',
              style: {
                borderRadius: '8px'
              },
              fallback: getProxyImageUrl(img)
            })
          })
        }, img);
      }
      return null;
    })
  });
}
GraphicPreviewPage.propTypes = {
  data: PropTypes.object.isRequired
};
export default GraphicPreviewPage;