import { forwardRef } from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import CustomPropTypes from "../../../utils/prop-types/index.js";
import useResponsiveValues from "../../../hooks/breakpoint/useResponsiveValues/index.js";
import classes from './styles.module.scss';

/**
 * Renders a headline as defined by our typography specifications. Headlines
 * are intended as page-topping titles that deserve the most emphasis.
 *
 * ```js
 *
 * import { Headline } from '@politico/interactive-style';
 * ```
 */
const Headline = forwardRef((props, ref) => {
  const {
    as: Tag,
    size,
    weight,
    outlet,
    align,
    children
  } = props;
  const sizeValue = useResponsiveValues(size);
  return <Tag ref={ref} className={classnames(classes[`headline-${sizeValue}`], classes[`weight-${weight}`], classes[`outlet-${outlet}`], classes[`align-${align}`])}>
      {children}
    </Tag>;
});
Headline.displayName = 'Headline';
Headline.defaultProps = {
  size: {
    xs: '100',
    md: '500'
  },
  weight: 'bold',
  outlet: 'interactive',
  align: undefined,
  children: undefined
};
Headline.propTypes = {
  /**
   * The kind of tag to use to render this headline. Remember you should
   * be sure not to use multiple `<h1>`tags on the same page.
   */
  as: PropTypes.elementType.isRequired,
  /**
   * The size of the headline. By default the size is responsive, but you can
   * specify a single value if you want it to be the same at all screen sizes.
   */
  size: CustomPropTypes.responsive(PropTypes.oneOf(['700', '600', '500', '400', '300', '200', '100'])),
  /**
   * The weight of the headline text.
   */
  weight: PropTypes.oneOf(['bold', 'regular', 'light']),
  /**
   * The outlet style of the headline text.
   */
  outlet: PropTypes.oneOf(['interactive', 'magazine']),
  /**
   * The text alignment of the headline text.
   */
  align: PropTypes.oneOf(['left', 'right', 'center']),
  /**
   * The contents of the headline.
   */
  children: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)])
};
export default Headline;