import { jsx as _jsx } from "react/jsx-runtime";
import * as React from 'react';
import Media from "../../components/Media/Media.js";
import MediaBase from "../../components/MediaBase/MediaBase.js";
import { useTheme } from "../../gravity-blocks/context/theme/index.js";
import { block, getThemedValue } from "../../utils/index.js";
import { getMediaBorder } from "../../utils/borderSelector.js";
import { mergeVideoMicrodata } from "../../utils/microdata.js";
import './Media.css';
const b = block('media-block');
export const MediaBlock = (props) => {
    const { media, border, disableShadow, title, description } = props;
    const borderSelected = getMediaBorder({
        border,
        disableShadow,
    });
    const [play, setPlay] = React.useState(false);
    const theme = useTheme();
    const mediaThemed = getThemedValue(media, theme);
    const mediaWithMicrodata = mergeVideoMicrodata(mediaThemed, {
        name: typeof title === 'object' && 'text' in title ? title.text : title,
        description,
    });
    return (_jsx(MediaBase, { ...props, onScroll: () => setPlay(true), children: _jsx(MediaBase.Card, { children: _jsx(Media, { imageClassName: b('image'), ...mediaWithMicrodata, playVideo: play, className: b({ border: borderSelected }) }) }) }));
};
export default MediaBlock;
//# sourceMappingURL=Media.js.map
