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