import { jsx as e } from "../../../../../external/.pnpm/preact@10.28.2/node_modules/preact/jsx-runtime/dist/jsxRuntime.module.js";
import c from "../../../Button/Button.js";
import n from "../../../Typography/Typography.js";
import { TypographyVariant as t, TypographyElement as r } from "../../../Typography/types.js";
import { ButtonVariant as p } from "../../../Button/types.js";
import { BASE_CLASS as i } from "../constants.js";
import { useMemo as d } from "../../../../../external/.pnpm/preact@10.28.2/node_modules/preact/hooks/dist/hooks.module.js";
/* empty css                */
import { getHumanReadableFileSize as u } from "../../../../../utils/file/size.js";
import { Icon as o } from "../../../Icon/Icon.js";
import { Translation as h } from "../../../Translation/Translation.js";
const a = {
  fileBase: `${i}__file`,
  fileButton: `${i}__file-button`,
  fileDetails: `${i}__file-details`,
  fileIcon: `${i}__file-icon`,
  fileName: `${i}__file-name`,
  fileSize: `${i}__file-size`
};
function D({ file: l, deleteFile: m, disabled: s }) {
  const f = d(() => u(l.size), [l.size]);
  return /* @__PURE__ */ e("div", { className: a.fileBase, children: [
    /* @__PURE__ */ e("div", { className: a.fileDetails, children: [
      /* @__PURE__ */ e(o, { name: "checkmark-circle-fill", className: a.fileIcon }),
      /* @__PURE__ */ e("div", { className: a.fileName, title: l.name, children: /* @__PURE__ */ e(n, { el: r.SPAN, variant: t.BODY, stronger: !0, children: l.name }) }),
      /* @__PURE__ */ e(n, { className: a.fileSize, el: r.SPAN, variant: t.BODY, children: f })
    ] }),
    /* @__PURE__ */ e(c, { className: a.fileButton, disabled: s, variant: p.TERTIARY, onClick: m, children: [
      /* @__PURE__ */ e(o, { name: "trash-can" }),
      /* @__PURE__ */ e("span", { className: "adyen-pe-visually-hidden", children: /* @__PURE__ */ e(h, { translationKey: "common.inputs.file.actions.delete", fills: { filename: l.name } }) })
    ] })
  ] });
}
export {
  D as UploadedFile,
  D as default
};
