import { jsxs as s, jsx as t } from "react/jsx-runtime";
import "./index-ErrorImagesList.scss.js";
import { mr2 as h, alignItemsCenter as m, justifyContentCenter as u, mb3 as f, dFlex as I, dFlexColumn as C } from "./index-general.module.js";
import { classNames as o } from "./index-classNames.js";
import { ComponentContainer as x } from "./index-ComponentContainer.js";
import { Icon as y, IconSize as g } from "./index-Icon.js";
import { IconNames as v } from "./index-IconNames.js";
import { Text as i, TextTypes as n, FontWeights as N } from "./index-Text.js";
import "react";
const O = (a) => {
  const {
    mediaItemsErrors: e,
    validMediaItemsCount: j,
    invalidMediaItemsCount: l = 0
  } = a;
  return Object.keys(e).length ? s(x, {
    className: "ErrorImagesList-container",
    children: [s("div", {
      className: o(I, f, u, m),
      children: [t(y, {
        className: h,
        hasCircle: !0,
        type: g.small,
        color: "--e500",
        children: v.exclamation
      }), t(i, {
        replacements: {
          no_of_issues: l
        },
        children: "We have identified %no_of_issues% issue(s) with the media items you've uploaded."
      })]
    }), Object.keys(e).map((r, c) => s("div", {
      className: o(C, m),
      children: [t(i, {
        type: n.textHelp,
        replacements: e[r].replacements,
        children: r
      }), e[r].mediaItemsWithErrors.map((d, p) => t(i, {
        type: n.textHelp,
        fontWeight: N.bold,
        children: d
      }, p))]
    }, c))]
  }) : null;
};
export {
  O as ErrorImagesList
};
