import { Label } from "components/Descriptive/Label";
import { getResourceURI } from "hooks/getResourceURI";
import React from "react";
import { InterstitialStyled, LQIP } from "./Interstitial.styled";
import { MetadataItem } from "components/Descriptive/MetadataItem";
export const Interstitial = ({ label, requiredStatement, painting, size, text, }) => {
    const resource = getResourceURI(painting);
    const img = `${resource}/full/${size},/0/default.jpg`;
    const lqip = `${resource}/full/20,/0/default.jpg`;
    return (React.createElement(InterstitialStyled, { css: { height: size } },
        React.createElement("div", null,
            React.createElement("figcaption", { style: { paddingRight: size } },
                React.createElement("span", null, text),
                React.createElement("div", null,
                    React.createElement(Label, { label: label }),
                    React.createElement("dl", null,
                        React.createElement(MetadataItem, { item: requiredStatement })))),
            React.createElement("div", null,
                React.createElement("img", { src: img, style: { width: size } }),
                React.createElement(LQIP, { css: { backgroundImage: `url(${lqip})` } })))));
};
//# sourceMappingURL=Interstitial.js.map