import React from 'react';
import classnames from 'classnames';
import i18n from 'ui-i18n';
import Typography from '@mui/material/Typography';
import { FileDropZone } from '../../../FileDropZone';
import { SelectImageButton } from '../SelectImageButton';
import UploadIcon from '../../../icons/UploadIcon';
import { MAX_IMAGE_SIZE } from '../../constants';
import styles from './TargetBox.module.css';
export var TargetBox = function (_a) {
    var onAppendFile = _a.onAppendFile, className = _a.className;
    return (React.createElement(FileDropZone, { className: classnames(styles.root, className), onFileDrop: onAppendFile },
        React.createElement(UploadIcon, { className: styles.icon }),
        React.createElement(Typography, { className: styles.title }, i18n.text('Drag an image here')),
        React.createElement(Typography, { className: styles.description }, i18n.text('Acceptable image types would include JPG, PNG, TIFF, GIF, BMP. Maximum image size: ${MAX_IMAGE_SIZE}Mb', {
            MAX_IMAGE_SIZE: MAX_IMAGE_SIZE
        })),
        React.createElement(SelectImageButton, { onAppendFile: onAppendFile })));
};
