import { Box, SkeletonGroup, SkeletonLine, SkeletonRectangle, } from '@wix/design-system';
import React from 'react';
import { observer } from 'mobx-react-lite';
function _SkeletonTopImageCard(props) {
    const { state: { preset, calcGridProps: { cardTopImageHeight, cardFooterHeight }, }, } = props;
    return (React.createElement(SkeletonGroup, { skin: "light" },
        React.createElement(Box, { direction: "vertical", width: "100%" },
            React.createElement(SkeletonRectangle, { width: "100%", height: cardTopImageHeight }),
            preset !== 'empty' && (React.createElement(Box, { width: "100%", height: cardFooterHeight, verticalAlign: "middle", direction: "vertical", gap: "12px" },
                React.createElement(SkeletonLine, { width: "75%" }),
                preset === 'full' && React.createElement(SkeletonLine, { width: "60%" }),
                preset === 'footer' && React.createElement(SkeletonLine, { width: "60%" }))))));
}
export const SkeletonTopImageCard = observer(_SkeletonTopImageCard);
//# sourceMappingURL=SkeletonTopImageCard.js.map