import '../components/image-field/devvit-image-field.js';
import { msg } from '@lit/localize';
import { html } from '@reddit/faceplate-ui/templateRenderingStrategy/clientStrategy.js';
import { renderFieldLabel } from './renderFieldLabel.js';
import { renderHelpText } from './renderHelpText.js';
export const renderImageField = (field) => {
    return html ` <div>
    ${renderFieldLabel(field, 'font-semibold text-14 text-neutral-content-strong')}
    ${renderHelpText(field.helpText)}
    <devvit-form-image-field
      class="flex mt-xs"
      name="${field.fieldId}"
      .field="${field}"
    ></devvit-form-image-field>
    <div class="flex flex-row justify-between text-12 text-neutral-content-weak mt-xs">
      <span
        >${msg('Formats: JPG, PNG, GIF, WEBP', {
        desc: 'Supported formats for image upload',
    })}</span
      >
      <span
        >${msg('Max size: 20 MB', { desc: 'Max file size for image upload is 20 megabytes' })}</span
      >
    </div>
  </div>`;
};
//# sourceMappingURL=renderImageField.js.map