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';

/**
 * Props for the PageSubTitle component.
 * @property {string} text The subtitle text.
 * @property {Object} [learnMore] An object with a `url` (required) for displaying a link button on the subtitle.
 * @property {string} learnMore.url where the link should navigate to
 * @property {string} [learnMore.label ="Learn more"] - the label of the link button. defaults to "Learn More"
 */
export interface PageSubTitleProps {
  text: string;
  learnMore?: {
    url: string;
    label?: string;
  };
}

/**
 * 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 }: PageSubTitleProps) => {
  const { translate: t, initTask } = useWixPatternsContainer();
  const { bi } = useCollectionPageContext();
  useSelector(() => initTask.status);

  const isMobile = useIsMobile();

  return (
    <Box dataHook="page-subtitle" display="inline">
      {text}
      {learnMore && (
        <>
          <Box inline marginLeft="SP1" />
          <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')}
          </TextButton>
        </>
      )}
    </Box>
  );
};
