import PropTypes from 'prop-types';
import styled from '@emotion/styled';
import Box from '@mui/material/Box';
import LazyImg from './lazy-img';
import { jsx as _jsx } from "react/jsx-runtime";
export default function Images({
  data = [],
  lazy = false,
  ...props
}) {
  if (!data || !data.length) {
    return null;
  }
  return /*#__PURE__*/_jsx(StyledBox, {
    ...props,
    children: data.map(item => /*#__PURE__*/_jsx("a", {
      href: item.url,
      target: "_blank",
      rel: "noreferrer",
      children: lazy ? /*#__PURE__*/_jsx(LazyImg, {
        src: item.url,
        alt: item.alt || ''
      }) : /*#__PURE__*/_jsx("img", {
        src: item.url,
        alt: item.alt || ''
      })
    }, item.url))
  });
}
Images.propTypes = {
  data: PropTypes.arrayOf(PropTypes.shape({
    url: PropTypes.string,
    alt: PropTypes.string
  })),
  lazy: PropTypes.bool
};
const StyledBox = styled(Box)`
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-bottom: -12px;
  a {
    display: flex;
  }
  img {
    height: 128px;
    cursor: pointer;
    margin-right: 12px;
    margin-bottom: 12px;
  }
`;