import { _ as __rest } from './tslib.es6-ab63fd84.js';
import React__default, { useContext } from 'react';
import { createStyles, rem, useMantineTheme, Box, Flex, ScrollArea } from '@mantine/core';
import { Warning } from '@hhgtech/icons/core';
import { RedCross } from '@hhgtech/icons/other';
import './index-c3177e04.js';
import '@mantine/dates';
import './index-a8162282.js';
import './index-91c6a49c.js';
import './index-43584299.js';
import './index-4e6b8a2b.js';
import { T as Text } from './index-d0a1200e.js';
import './index-f71a880f.js';
import { F as FontWeight, T as TemplateProvider, C as CustomStylesType } from './index-38e03570.js';
import './index.styles-3ba274d2.js';
import { u as useTranslations } from './index-960c3169.js';
import '@mantine/hooks';
import { M as MediaQueries } from './utils-32d7d5af.js';
import './index-f21110d2.js';
import { C as CardWrapperContext } from './context-e9fa0aef.js';

const StyledIconContainerClass = 'hhgcomp-toolbanner-iconcontainer';
const StyledInnerClass = 'hhgcomp-toolbanner-inner';
const StyledWrapperClass = 'hhgcomp-toolbanner-wrapper';
const useStyles$3 = createStyles((theme, { isRevamp, isPregTool, bannerColor, isMarryBaby }) => ({
    wrapper: {
        position: 'relative',
        width: '100%',
        height: '100%',
        display: 'flex',
        gap: rem(24),
        alignItems: 'center',
        justifyContent: 'space-between',
        padding: rem(16),
        [theme.fn.smallerThan('sm')]: {
            gap: rem(12),
        },
    },
    container: {
        width: '100%',
        backgroundColor: bannerColor ||
            (isMarryBaby
                ? theme.colors.mb[1]
                : isPregTool
                    ? theme.colors.pink[1]
                    : theme.colors.blue[1]),
        position: 'relative',
        display: 'flex',
        gap: 24,
        alignItems: 'center',
        justifyContent: 'space-between',
        padding: rem(16),
        [theme.fn.smallerThan('sm')]: {
            padding: `${rem(12)} ${rem(16)}`,
        },
        a: {
            textDecoration: 'none',
            color: 'inherit',
        },
        '&[data-site="marryBaby"]': {
            a: {
                textDecoration: 'underline',
            },
            [MediaQueries.mbDown]: {
                paddingBottom: 0,
            },
        },
        [MediaQueries.tdDown]: {
            height: 'auto',
            [`.${StyledWrapperClass}`]: {
                [`.${StyledInnerClass}`]: {
                    display: 'flex',
                    alignItems: 'center',
                    [MediaQueries.mbDown]: {
                        justifyContent: 'space-between',
                    },
                    [`.${StyledIconContainerClass}`]: {
                        position: 'relative',
                        right: rem(-50),
                        bottom: rem(-20),
                        width: rem(110),
                        minWidth: 0,
                        height: 'auto',
                        minHeight: 0,
                        alignSelf: 'flex-end',
                        marginBottom: rem(-20),
                        [MediaQueries.mbDown]: {
                            right: 'unset',
                        },
                    },
                },
            },
        },
        '.embedded-review': {
            gap: rem(12),
            display: 'flex',
            alignItems: 'center',
        },
        '.embedded-review__avatar': {
            position: 'relative',
            minWidth: rem(32),
            img: {
                width: rem(32),
                height: rem(32),
                display: 'block',
                borderRadius: '100%',
            },
            svg: {
                bottom: 0,
                right: 0,
                position: 'absolute',
            },
        },
    },
    headingWrapper: {
        display: 'flex',
        flexDirection: 'column',
        gap: isRevamp ? rem(8) : 0,
        [theme.fn.smallerThan('sm')]: {
            gap: 4,
        },
    },
    avatarWrapper: {
        position: 'relative',
        img: {
            maxWidth: rem(48),
            maxHeight: rem(48),
        },
        '.embedded-review__avatar': {
            position: 'relative',
        },
    },
    reviewText: {
        a: {
            textDecoration: 'underline',
            textUnderlineOffset: '2px',
        },
    },
    iconWrapper: {
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        width: rem(80),
        height: rem(80),
        borderRadius: '50%',
        backgroundColor: '#fff',
        flexShrink: 0,
        img: {
            maxWidth: rem(48),
            maxHeight: rem(48),
        },
        [theme.fn.smallerThan('sm')]: {
            width: rem(64),
            height: rem(64),
            img: {
                maxWidth: rem(40),
                maxHeight: rem(40),
            },
        },
    },
    heading: {},
    disclaimerIcon: {
        flexShrink: 0,
    },
}));

const ToolsBannerCard = (_a) => {
    var { className, classNames, heading, bannerColor, medicalReview = { link: '#', reviewer: '', date: '' }, icon, style, isPregTool, isRevamp, disclaimer, styles } = _a, rest = __rest(_a, ["className", "classNames", "heading", "bannerColor", "medicalReview", "icon", "style", "isPregTool", "isRevamp", "disclaimer", "styles"]);
    const { t } = useTranslations();
    const theme = useMantineTheme();
    const isMarryBaby = theme.other.template === 'mb';
    const siteType = isMarryBaby ? 'marryBaby' : 'helloSites';
    const headingAs = 'h2';
    const { classes, cx } = useStyles$3({ isRevamp, isPregTool, bannerColor, isMarryBaby }, {
        name: 'ToolsBannerCard',
        styles,
        classNames,
    });
    const medicalReviewEle = (medicalReview === null || medicalReview === void 0 ? void 0 : medicalReview.reviewer) ? (React__default.createElement(Text, { size: "label2", as: "div", className: classes.reviewText },
        medicalReview.avatar && (React__default.createElement("div", { className: "embedded-review__avatar" },
            React__default.createElement(Box, { className: classes.avatarWrapper },
                React__default.createElement("img", { src: medicalReview.avatar, alt: medicalReview.reviewer, loading: "lazy" }),
                React__default.createElement(RedCross, { size: 14 })))),
        React__default.createElement("div", { dangerouslySetInnerHTML: {
                __html: t('toolPage.toolReviewer', {
                    expert_name: `<a href="${medicalReview.link}">${medicalReview.reviewer.trim()}</a>`,
                    date: medicalReview.date,
                }),
            } }))) : null;
    return (React__default.createElement(Box, Object.assign({ className: cx(className, classes.container), style: style, "data-site": siteType }, rest),
        React__default.createElement(Flex, { className: classes.headingWrapper },
            React__default.createElement(Text, { className: cx(classes.heading, 'heading'), size: 'h4', as: headingAs }, heading),
            medicalReviewEle && React__default.createElement(Text, { size: "n1" }, medicalReviewEle),
            disclaimer && (React__default.createElement(Flex, { gap: 4 },
                React__default.createElement(Warning, { size: 16, color: theme.colors.yellow[8], className: classes.disclaimerIcon }),
                React__default.createElement(Text, { size: "c1", variant: "secondary" }, disclaimer)))),
        React__default.createElement(Flex, { className: classes.iconWrapper }, icon)));
};

var useStyles$2 = createStyles(() => {
    return {
        root: {
            borderTopLeftRadius: 'inherit',
            borderTopRightRadius: 'inherit',
        },
    };
});

const Banner = (_a) => {
    var { className, classNames, styles } = _a, rest = __rest(_a, ["className", "classNames", "styles"]);
    const { classes: wrapperClasses } = useContext(CardWrapperContext);
    const { isPregTool } = useContext(CardWrapperContext);
    const { classes, cx } = useStyles$2(undefined, {
        name: 'HealthToolCardWrapper__Banner',
        classNames,
        styles,
    });
    return (React__default.createElement(ToolsBannerCard, Object.assign({ isPregTool: isPregTool, classNames: {
            container: wrapperClasses.bannerWrapper,
            heading: wrapperClasses.bannerHeading,
            reviewText: wrapperClasses.bannerReviewText,
        }, className: cx(className, classes.root) }, rest)));
};

var useStyles$1 = createStyles((theme) => {
    return {
        root: {
            paddingTop: 16,
            borderRadius: 'inherit',
            [theme.fn.smallerThan('sm')]: {
                paddingTop: 8,
            },
        },
    };
});

const Body = (_a) => {
    var { children, className, styles, classNames } = _a, rest = __rest(_a, ["children", "className", "styles", "classNames"]);
    const { classes: wrapperClasses, hasBodyScroll } = useContext(CardWrapperContext);
    const { classes, cx } = useStyles$1(undefined, {
        name: 'HealthToolCardWrapper__Body',
        styles,
        classNames,
    });
    return (React__default.createElement(Box, Object.assign({ className: cx(className, classes.root, wrapperClasses.bodyWrapper) }, rest), hasBodyScroll ? (React__default.createElement(ScrollArea, { h: "100%", type: "auto", scrollbarSize: 8, className: wrapperClasses.scrollAreaWrapper }, children)) : (children)));
};

var useStyles = createStyles((theme, { isPregTool, variant }) => {
    const isMarryBaby = theme.other.template === 'mb';
    return {
        root: Object.assign(Object.assign(Object.assign({ display: 'flex', flexDirection: 'column', borderRadius: rem(isMarryBaby ? 16 : 8) }, (variant === 'default' && {
            backgroundColor: '#fff',
            border: `1px solid ${isMarryBaby
                ? theme.colors.mb[2]
                : isPregTool
                    ? theme.colors.pink[1]
                    : theme.colors.blue[2]}`,
        })), (variant === 'gray' && {
            backgroundColor: theme.colors.neutral[0],
        })), (variant === 'violet' && {
            backgroundColor: theme.colors.violet[0],
        })),
        submitBtn: {},
        bodyWrapper: {},
        scrollAreaWrapper: {},
        bannerWrapper: Object.assign(Object.assign({}, (variant === 'gray' && {
            backgroundColor: 'transparent',
            padding: `${rem(16)} ${rem(16)} 0`,
        })), (variant === 'violet' && {
            backgroundColor: 'transparent',
            padding: `${rem(16)} ${rem(16)} 0`,
        })),
        bannerHeading: Object.assign({}, ((variant === 'gray' || variant === 'violet') && {
            fontSize: rem(20),
            lineHeight: rem(28),
            fontWeight: FontWeight.semiBold,
            [theme.fn.smallerThan('sm')]: {
                fontSize: rem(17),
                lineHeight: rem(24),
            },
        })),
        bannerReviewText: Object.assign({}, ((variant === 'gray' || variant === 'violet') && {
            fontSize: rem(14),
            lineHeight: rem(22),
            [theme.fn.smallerThan('sm')]: {
                fontSize: rem(12),
                lineHeight: rem(18),
            },
        })),
        submitWrapper: Object.assign(Object.assign({ [theme.fn.smallerThan('sm')]: {
                button: {
                    width: '100%',
                },
            }, [theme.fn.largerThan('sm')]: {
                textAlign: 'right',
            } }, (variant === 'gray' && {
            backgroundColor: theme.colors.neutral[0],
            button: {
                marginTop: 10,
            },
        })), (variant === 'violet' && {
            backgroundColor: theme.colors.violet[0],
            button: {
                marginTop: 10,
            },
        })),
        newsletterBlock: Object.assign(Object.assign({}, (variant === 'gray' && {
            backgroundColor: theme.colors.neutral[0],
        })), (variant === 'violet' && {
            backgroundColor: theme.colors.violet[0],
        })),
    };
});

const _HealthToolCardWrapper = (_a) => {
    var { children, styles, classNames, className, isPregTool, variant = 'default', hasBodyScroll } = _a, rest = __rest(_a, ["children", "styles", "classNames", "className", "isPregTool", "variant", "hasBodyScroll"]);
    const { classes, cx } = useStyles({ isPregTool, variant }, {
        name: 'HealthToolCardWrapper',
        styles,
        classNames,
    });
    return (React__default.createElement(TemplateProvider, { variant: CustomStylesType.LEADGEN },
        React__default.createElement(CardWrapperContext.Provider, { value: {
                isPregTool,
                classes,
                variant,
                hasBodyScroll,
            } },
            React__default.createElement(Box, Object.assign({ className: cx(className, classes.root) }, rest), children))));
};
const HealthToolCardWrapper = _HealthToolCardWrapper;
HealthToolCardWrapper.Body = Body;
HealthToolCardWrapper.Banner = Banner;

export { HealthToolCardWrapper as H, ToolsBannerCard as T };
