import PropTypes from 'prop-types';
import { prependContext } from "../../../utils/tracking/index.js";
import classes from './styles.module.scss';
import ModuleTitle from '../ModuleTitle';
import ElectionLink from '../ElectionLink';
import ElectionCaretLink from '../ElectionCaretLink';

/**
 * A module that can be used to recirc to anything.
 */
const GenericRecirc = function GenericRecirc(props) {
  const {
    headline: headlineFromProps,
    description,
    eyebrow,
    visual,
    link,
    tracking
  } = props;
  const trackingOpts = {
    context: prependContext({
      prefix: 'GenericRecirc',
      context: tracking?.context
    })
  };
  const headline = <ElectionCaretLink to={link} tracking={trackingOpts} text={headlineFromProps} caretSize="3" />;
  return <div className={classes.container}>
      <ModuleTitle headline={headline} description={description} eyebrow={eyebrow} />
      <ElectionLink to={link} tracking={trackingOpts}>
        {visual}
      </ElectionLink>
    </div>;
};
GenericRecirc.defaultProps = {
  eyebrow: {},
  visual: {},
  tracking: {
    context: undefined
  }
};
GenericRecirc.propTypes = {
  /**
   * Custom headline for the module
   */
  headline: PropTypes.string.isRequired,
  /**
   * A custom description for the module
   */
  description: PropTypes.string.isRequired,
  /**
   * An eyebrow configuration for the module
   */
  eyebrow: PropTypes.shape,
  /**
   * An optional visual to render below the module title
   */
  visual: PropTypes.node,
  /**
   * The URL of the page that the eyebrow is linking to.
   */
  link: PropTypes.string.isRequired,
  /**
   * Tracking configuration
   */
  tracking: PropTypes.shape({
    context: PropTypes.string
  })
};
export default GenericRecirc;