import { _ as __rest } from './tslib.es6-ab63fd84.js';
import React__default, { useMemo } from 'react';
import { Card, Group, Box, Flex, createStyles } from '@mantine/core';
import innertext from 'innertext';
import { b as Anchor, A as Avatar, c as AspectRatio } from './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 './index-38e03570.js';
import './index.styles-3ba274d2.js';
import './translationsContext-4de1415e.js';
import '@mantine/hooks';
import './utils-32d7d5af.js';
import './index-f21110d2.js';
import { u as useScreenSize } from './index-74fcf0aa.js';
import '@hhgtech/icons/other';
import '@emotion/styled';
import '@mantine/carousel';
import './miscTheme.js';
import './shared-3674950a.js';
import 'classnames';
import 'uuid';
import './useUniqueId-6d89c40a.js';
import './constantsSite.js';
import './Locale-87b46912.js';
import '@emotion/react';
import '@hhgtech/icons/core';
import 'date-fns/locale';
import './constantsDomainLocales.js';
import './constantsRiskScreener.js';
import './constantsIsProduction.js';
import 'dayjs';
import '@mantine/notifications';

const _Horizontal = (_a) => {
    var _b, _c, _d;
    var { article, author, authorAvatar, badge = '', hideDescription = false, isBookmarked = false, onBookmark, time, tracking } = _a, 
    // size = 'lg',
    rest = __rest(_a, ["article", "author", "authorAvatar", "badge", "hideDescription", "isBookmarked", "onBookmark", "time", "tracking"]);
    const { isMobile } = useScreenSize();
    console.log({ article });
    // const maw = useMemo(() => {
    //   switch (size) {
    //     case 'lg':
    //       return 648
    //     case 'md':
    //       return 456
    //     case 'sm':
    //       return 264
    //     default:
    //       return 648
    //   }
    // }, [size])
    return (React__default.createElement(Card, Object.assign({ padding: 0, radius: 0, 
        // maw={maw}
        sx: {
            display: 'flex',
            flexDirection: 'row',
            gap: 24,
        } }, rest),
        React__default.createElement(Card.Section, { w: "100%", h: "100%", miw: 264, m: 0, className: "pointer" },
            React__default.createElement("img", { src: (isMobile ? article.featureImageMobile : article.featureImage) ||
                    article.featureImage, alt: article.postName, style: {
                    width: '100%',
                }, loading: "lazy" })),
        React__default.createElement(Card.Section, null,
            React__default.createElement(Group, { position: "apart", mt: 16, mb: 4 },
                React__default.createElement(Anchor, { href: ((_b = article === null || article === void 0 ? void 0 : article.primaryCategory) === null || _b === void 0 ? void 0 : _b.permalink) || '#' },
                    React__default.createElement(Text, { size: "p4", color: "blue.6" }, (_c = article === null || article === void 0 ? void 0 : article.primaryCategory) === null || _c === void 0 ? void 0 : _c.displayName)),
                React__default.createElement(Box, { sx: { cursor: 'pointer' }, role: "button", onClick: onBookmark }, !isBookmarked ? (React__default.createElement("svg", Object.assign({ width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" }, tracking === null || tracking === void 0 ? void 0 : tracking.bookmark),
                    React__default.createElement("path", { d: "M7 17.95L12 15.8L17 17.95V5.3C17 5.23333 16.9667 5.16667 16.9 5.1C16.8333 5.03333 16.7667 5 16.7 5H7.3C7.23333 5 7.16667 5.03333 7.1 5.1C7.03333 5.16667 7 5.23333 7 5.3V17.95ZM6.775 19.7C6.475 19.8333 6.18733 19.8123 5.912 19.637C5.63733 19.4623 5.5 19.2083 5.5 18.875V5.3C5.5 4.8 5.675 4.375 6.025 4.025C6.375 3.675 6.8 3.5 7.3 3.5H16.7C17.2 3.5 17.625 3.675 17.975 4.025C18.325 4.375 18.5 4.8 18.5 5.3V18.875C18.5 19.2083 18.3623 19.4623 18.087 19.637C17.8123 19.8123 17.525 19.8333 17.225 19.7L12 17.45L6.775 19.7ZM7 5H17H12H7Z", fill: "#595959" }))) : (React__default.createElement("svg", Object.assign({ width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" }, tracking === null || tracking === void 0 ? void 0 : tracking.bookmark),
                    React__default.createElement("path", { d: "M6.775 19.7C6.475 19.8333 6.18733 19.8123 5.912 19.637C5.63733 19.4623 5.5 19.2083 5.5 18.875V5.3C5.5 4.8 5.675 4.375 6.025 4.025C6.375 3.675 6.8 3.5 7.3 3.5H16.7C17.2 3.5 17.625 3.675 17.975 4.025C18.325 4.375 18.5 4.8 18.5 5.3V18.875C18.5 19.2083 18.3623 19.4623 18.087 19.637C17.8123 19.8123 17.525 19.8333 17.225 19.7L12 17.45L6.775 19.7Z", fill: "#595959" }))))),
            React__default.createElement(Text, { size: hideDescription ? 's2' : 's1', mb: 8, weight: "semiBold", className: "pointer" }, article.postTitle || article.postName || ''),
            !hideDescription && (React__default.createElement(Text, { size: "p2", mb: 16, lineClamp: 3, className: "pointer" }, innertext(article.excerpt ||
                article.description ||
                ((_d = article.postContent) === null || _d === void 0 ? void 0 : _d.split('\r\n')[0]) ||
                ''))),
            React__default.createElement(Flex, { gap: 12, align: 'center' },
                React__default.createElement(Avatar, { size: 32, src: authorAvatar, withIndicator: true, indicatorConfig: {
                        offset: 5,
                        size: 18,
                        label: React__default.createElement("img", { loading: "lazy", src: badge, alt: "" }),
                    } }, "A"),
                React__default.createElement(Text, { size: "n1", c: "gray.6" },
                    author,
                    " \u2022 ",
                    time)))));
};

// MyComponent.styles.ts
// eslint-disable-next-line @typescript-eslint/no-unused-vars
var useStyles = createStyles((_theme, {}) => ({
    // add all styles as usual
    root: {},
    image: {},
    title: {},
    category: {},
    description: {},
    author: {},
}));

const RATIO = {
    DEFAULT: 648 / 440,
    NO_DESCRIPTION: 456 / 304,
};
const _Vertical = (_a) => {
    var _b, _c, _d;
    var { article, author, authorAvatar, badge = '', bannerImageWrapProps, hideDescription = false, isBookmarked = false, onBookmark, time, tracking, 
    // size = 'lg',
    classNames, styles, unstyled, className } = _a, rest = __rest(_a, ["article", "author", "authorAvatar", "badge", "bannerImageWrapProps", "hideDescription", "isBookmarked", "onBookmark", "time", "tracking", "classNames", "styles", "unstyled", "className"]);
    const { isMobile } = useScreenSize();
    const { classes, cx } = useStyles(
    // First argument of useStyles is styles params
    {}, 
    // Second argument is responsible for styles api integration
    { name: 'ArticleCard', classNames, styles, unstyled });
    const type = useMemo(() => {
        if (hideDescription) {
            return RATIO.NO_DESCRIPTION;
        }
        else {
            return RATIO.DEFAULT;
        }
    }, [hideDescription]);
    // const maw = useMemo(() => {
    //   switch (size) {
    //     case 'lg':
    //       return 648
    //     case 'md':
    //       return 456
    //     case 'sm':
    //       return 264
    //     default:
    //       return 648
    //   }
    // }, [size])
    return (React__default.createElement(Card, Object.assign({ className: cx(classes.root, className), padding: 'lg', radius: 0 }, rest),
        React__default.createElement(Card.Section, { className: cx(classes.image, 'pointer') },
            React__default.createElement(AspectRatio, Object.assign({ ratio: type }, bannerImageWrapProps),
                React__default.createElement("img", { src: (isMobile ? article.featureImageMobile : article.featureImage) ||
                        article.featureImage, alt: article.postName, style: { objectFit: 'cover' } }))),
        React__default.createElement(Card.Section, null,
            React__default.createElement(Group, { position: "apart", mt: 16, mb: 4 },
                React__default.createElement(Anchor, { className: classes.category, href: ((_b = article === null || article === void 0 ? void 0 : article.primaryCategory) === null || _b === void 0 ? void 0 : _b.permalink) || '#' },
                    React__default.createElement(Text, { size: "p4", color: "blue.6" }, (_c = article === null || article === void 0 ? void 0 : article.primaryCategory) === null || _c === void 0 ? void 0 : _c.displayName)),
                React__default.createElement(Box, { sx: { cursor: 'pointer' }, role: "button", onClick: onBookmark }, !isBookmarked ? (React__default.createElement("svg", Object.assign({ width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" }, tracking === null || tracking === void 0 ? void 0 : tracking.bookmark),
                    React__default.createElement("path", { d: "M7 17.95L12 15.8L17 17.95V5.3C17 5.23333 16.9667 5.16667 16.9 5.1C16.8333 5.03333 16.7667 5 16.7 5H7.3C7.23333 5 7.16667 5.03333 7.1 5.1C7.03333 5.16667 7 5.23333 7 5.3V17.95ZM6.775 19.7C6.475 19.8333 6.18733 19.8123 5.912 19.637C5.63733 19.4623 5.5 19.2083 5.5 18.875V5.3C5.5 4.8 5.675 4.375 6.025 4.025C6.375 3.675 6.8 3.5 7.3 3.5H16.7C17.2 3.5 17.625 3.675 17.975 4.025C18.325 4.375 18.5 4.8 18.5 5.3V18.875C18.5 19.2083 18.3623 19.4623 18.087 19.637C17.8123 19.8123 17.525 19.8333 17.225 19.7L12 17.45L6.775 19.7ZM7 5H17H12H7Z", fill: "#595959" }))) : (React__default.createElement("svg", Object.assign({ width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" }, tracking === null || tracking === void 0 ? void 0 : tracking.bookmark),
                    React__default.createElement("path", { d: "M6.775 19.7C6.475 19.8333 6.18733 19.8123 5.912 19.637C5.63733 19.4623 5.5 19.2083 5.5 18.875V5.3C5.5 4.8 5.675 4.375 6.025 4.025C6.375 3.675 6.8 3.5 7.3 3.5H16.7C17.2 3.5 17.625 3.675 17.975 4.025C18.325 4.375 18.5 4.8 18.5 5.3V18.875C18.5 19.2083 18.3623 19.4623 18.087 19.637C17.8123 19.8123 17.525 19.8333 17.225 19.7L12 17.45L6.775 19.7Z", fill: "#595959" }))))),
            React__default.createElement(Text, { className: cx(classes.title, 'pointer'), size: hideDescription ? 's2' : 's1', mb: 8, weight: "semiBold" }, article.postTitle || article.postName || ''),
            !hideDescription && (React__default.createElement(Text, { className: cx(classes.description, 'pointer'), size: "p2", mb: 16, lineClamp: 3 }, innertext(article.excerpt ||
                article.description ||
                ((_d = article.postContent) === null || _d === void 0 ? void 0 : _d.split('\r\n')[0]) ||
                ''))),
            React__default.createElement(Flex, { className: classes.author, gap: 12, align: 'center' },
                React__default.createElement(Avatar, { size: 32, src: authorAvatar, withIndicator: true, indicatorConfig: {
                        offset: 5,
                        size: 18,
                        label: React__default.createElement("img", { loading: "lazy", src: badge, alt: "" }),
                    } }, "A"),
                React__default.createElement(Text, { size: "n1", c: "gray.6" },
                    author,
                    " \u2022 ",
                    time)))));
};

const ArticleCard = (_a) => {
    var { variant = 'vertical' } = _a, rest = __rest(_a, ["variant"]);
    return variant === 'horizontal' ? (React__default.createElement(_Horizontal, Object.assign({}, rest))) : (React__default.createElement(_Vertical, Object.assign({}, rest)));
};

export { ArticleCard };
