import { jsx as _jsx } from "@emotion/react/jsx-runtime";
import React from "react";
import { Box } from "@chakra-ui/react";
import { css } from "@emotion/react";
import useAspectRatioDimension from "../hooks/useAspectRatioDimension";
import { DevicePreviewType } from "../editor/DevicePreview";
import DevicePreviewsMap from "../editor/DevicePreview/DevicePreviewsMap";
const DevicePreview = ({ children, type, }) => {
    const Preview = React.useMemo(() => DevicePreviewsMap(DevicePreviewType.PREVIEW)[type], [type]);
    const aspectRatio = useAspectRatioDimension(Preview.width, Preview.height);
    return (_jsx(Box, Object.assign({ css: css `
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
        margin: ${type === "Desktop" ? "0" : "10px"};
      ` }, { children: _jsx(Box, Object.assign({ ref: aspectRatio.containerRef, css: css `
          position: relative;
          width: 100%;
          height: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          overflow: hidden;
        ` }, { children: _jsx(Box, Object.assign({ css: type === "Desktop"
                    ? undefined
                    : css `
                  transform: scale(${aspectRatio.scale * 1});
                ` }, { children: _jsx(Preview.Component, { children: children }) })) })) })));
};
export default DevicePreview;
//# sourceMappingURL=DevicePreview.js.map