import React from 'react';
import classnames from 'classnames';
import { useTranslation } from '../hooks/use-translation';
import { jsx as _jsx } from "react/jsx-runtime";
/** Visual representation of supported files format. */
export function AcceptedFilesInfo({
  acceptedFilesList = [],
  className = '',
  buildSupportedFilesText,
  testId = 'accepted-files-info'
}) {
  const {
    t
  } = useTranslation();
  if (acceptedFilesList.length <= 0) {
    return null;
  }
  const supportedFileTypes = `.${acceptedFilesList.join(', .')}`;
  const supportedFilesTranslated = buildSupportedFilesText ? buildSupportedFilesText(supportedFileTypes) : t('Accepted formats: {{supportedFileTypes}}', {
    supportedFileTypes
  });
  return /*#__PURE__*/_jsx("span", {
    className: classnames('accepted-files-info', className),
    "test-id": testId,
    children: supportedFilesTranslated
  });
}