import React from 'react';
import { Box, TextButton } from '@wix/design-system';
import { useCollectionPageContext, useWixPatternsContainer, } from '@wix/bex-core/react';
import { useSelector } from '../../useSelector';
import { withoutDefaults } from '@wix/bex-core';
import { cairoPageCtaClicked } from '@wix/bex-core/bi';
import { useIsMobile } from '../../hooks/useIsMobile';
/**
 * Renders a page subtitle with an optional learn more button
 * @component
 * @param {PageSubTitleProps} props The props for the component.
 * @example
 * ```jsx
 * <PageSubTitle text="Welcome to my page" learnMore={{ url: "/learn-more", label: "Learn More" }} />
 * ```
 */
export const PageSubTitle = ({ text, learnMore }) => {
    const { translate: t, initTask } = useWixPatternsContainer();
    const { bi } = useCollectionPageContext();
    useSelector(() => initTask.status);
    const isMobile = useIsMobile();
    return (React.createElement(Box, { dataHook: "page-subtitle", display: "inline" },
        text,
        learnMore && (React.createElement(React.Fragment, null,
            React.createElement(Box, { inline: true, marginLeft: "SP1" }),
            React.createElement(TextButton, { dataHook: "subtitle-learn-more-cta", as: "a", rel: "noopener", target: "_blank", href: learnMore.url, size: isMobile ? 'small' : 'medium', onClick: () => {
                    bi?.reportBI(withoutDefaults(cairoPageCtaClicked)({
                        location: 'Collection Page Header',
                        ctaType: 'link',
                        ctaName: 'Learn more',
                    }));
                } }, learnMore.label ?? t('cairo.subtitle.learnMore'))))));
};
//# sourceMappingURL=PageSubTitle.js.map