"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.HintPlaceholder = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const formatFileSizeToView_1 = require("@astral/utils/file/formatFileSizeToView");
const Typography_1 = require("../../../Typography");
const styles_1 = require("./styles");
const useLogic_1 = require("./useLogic");
const HintPlaceholder = (props) => {
    const { extensions, imageProps, maxFileSize, placeholder, className, RenderImage, } = (0, useLogic_1.useLogic)(props);
    return ((0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { className: className, children: [(0, jsx_runtime_1.jsx)(RenderImage, { ...imageProps, alt: "\u0424\u0430\u0439\u043B\u044B \u0434\u043B\u044F \u0437\u0430\u0433\u0440\u0443\u0437\u043A\u0438" }), (0, jsx_runtime_1.jsx)(Typography_1.Typography, { component: "p", color: "textSecondary", variant: "caption", align: "center", children: placeholder || ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["\u041F\u0435\u0440\u0435\u0442\u0430\u0449\u0438\u0442\u0435 \u0438\u043B\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u0435 \u0444\u0430\u0439\u043B. \u0420\u0430\u0437\u043C\u0435\u0440\u043E\u043C \u043D\u0435 \u0431\u043E\u043B\u0435\u0435", ' ', (0, formatFileSizeToView_1.formatFileSizeToView)(maxFileSize), extensions && ' в формате ', (0, jsx_runtime_1.jsx)(styles_1.Extensions, { children: extensions })] })) })] }));
};
exports.HintPlaceholder = HintPlaceholder;
