import React__default, { useMemo } from 'react';
import { cx } from '@linaria/core';
import { BasicCTErrorStyle } from './BasicCTError.style.js';
import { Typo } from '../Typo/index.js';
import { useCTErrorMsg } from '../../hooks/useCTErrorMsg.js';
import useParrotTranslation from '../../hooks/useParrotTranslation.js';

const defaultErrorContainerRender = ({
  children,
  className
}) => {
  return /* @__PURE__ */ React__default.createElement("span", { className: cx(Typo.Label.l3_regular, BasicCTErrorStyle, className) }, children);
};
const BasicCTError = (props) => {
  const {
    error,
    className,
    ErrorItemRender,
    ErrorContainerRender,
    errorMsgOptions
  } = props;
  const msgs = useCTErrorMsg(error, errorMsgOptions);
  const { t } = useParrotTranslation();
  const ContainerRender = ErrorContainerRender || defaultErrorContainerRender;
  const child = useMemo(() => {
    if (ErrorItemRender) {
      return msgs.map((errorMsg, index) => /* @__PURE__ */ React__default.createElement(ErrorItemRender, { errorMsg, index, key: index }));
    }
    return msgs.join("");
  }, [msgs, ErrorItemRender, t]);
  return /* @__PURE__ */ React__default.createElement(ContainerRender, { className, errorMsgs: msgs, children: child });
};

export { BasicCTError };
