'use strict';
import { jsx, jsxs } from 'react/jsx-runtime';
import '../../../fd-component-toolbox/client/framework/index.js';
import { Button } from '../../../fd-component-toolbox/button/Button.js';
import { Icon, iconNames } from '../../../fd-component-toolbox/icon/Icon.js';
import FrameworkImage from 'next/image.js';

var __defProp = Object.defineProperty;
var __name = (target, value) => __defProp(target, "name", {
  value,
  configurable: true
});
function PreviewMedia({
  file,
  onClose
}) {
  return /* @__PURE__ */jsx("div", {
    className: "fixed inset-0 z-50 flex items-center justify-center bg-black/75",
    children: /* @__PURE__ */jsxs("div", {
      className: "relative max-w-4xl",
      children: [/* @__PURE__ */jsx(Button, {
        onClick: onClose,
        className: "absolute top-4 right-4 z-10",
        children: /* @__PURE__ */jsx(Icon, {
          name: iconNames.cross
        })
      }), file.preview ? /* @__PURE__ */jsx("video", {
        src: file.url,
        controls: true,
        autoPlay: true,
        playsInline: true,
        className: "pointer-events-auto max-h-screen max-w-full rounded-lg"
      }) : /* @__PURE__ */jsx(FrameworkImage, {
        src: file.url,
        alt: "Full-screen preview",
        width: 800,
        height: 600,
        className: "rounded-lg"
      })]
    })
  });
}
__name(PreviewMedia, "PreviewMedia");

export { PreviewMedia };
