import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useUniqId } from '@gravity-ui/uikit';
import { BackgroundImage, CardBase } from "../../components/index.js";
import { useTheme } from "../../gravity-blocks/context/theme/index.js";
import { block, getThemedValue } from "../../utils/index.js";
import Content from "../Content/Content.js";
import './BackgroundCard.css';
const b = block('background-card');
const BackgroundCard = (props) => {
    const { url, title, text, border, background, paddingBottom, backgroundColor, additionalInfo, theme: cardTheme = 'default', links, buttons, analyticsEvents, urlTitle, colSizes = { all: 12, md: 12 }, controlPosition = 'content', list, size = 's', } = props;
    const titleId = useUniqId();
    const theme = useTheme();
    const hasBackgroundColor = backgroundColor || cardTheme !== 'default';
    const borderType = hasBackgroundColor ? 'none' : border;
    const areControlsInFooter = !paddingBottom && controlPosition === 'footer';
    return (_jsx(CardBase, { className: b({ padding: paddingBottom, theme: cardTheme }), contentClassName: b('content'), url: url, border: borderType, analyticsEvents: analyticsEvents, urlTitle: urlTitle, children: _jsxs(CardBase.Content, { children: [_jsx(BackgroundImage, { className: b('image'), ...getThemedValue(background, theme), style: { backgroundColor } }), _jsx(Content, { titleId: titleId, title: title, text: text, additionalInfo: additionalInfo, size: size, theme: cardTheme, links: links, buttons: buttons, list: list, colSizes: colSizes, controlPosition: areControlsInFooter ? 'bottom' : 'default' })] }) }));
};
export default BackgroundCard;
//# sourceMappingURL=BackgroundCard.js.map
