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 title as defined by our typography specifications. Titles are
 * intended as section and subsection headers delineating the structure of
 * content within a page.
 *
 * ```js
 *
 * import { Title } from '@politico/interactive-style';
 * ```
 */
const Title = forwardRef((props, ref) => {
  const {
    as: Tag,
    size,
    weight,
    outlet,
    align,
    children
  } = props;
  const sizeValue = useResponsiveValues(size);
  return <Tag ref={ref} className={classnames(classes[`title-${sizeValue}`], classes[`weight-${weight}`], classes[`outlet-${outlet}`], classes[`align-${align}`])}>
      {children}
    </Tag>;
});
Title.displayName = 'Title';
Title.defaultProps = {
  as: 'h2',
  size: '700',
  weight: 'bold',
  outlet: 'interactive',
  align: undefined,
  children: undefined
};
Title.propTypes = {
  as: PropTypes.elementType,
  size: CustomPropTypes.responsive(PropTypes.oneOf(['700', '600', '500', '400', '300', '200', '100'])),
  weight: PropTypes.oneOf(['bold', 'regular', 'light']),
  outlet: PropTypes.oneOf(['interactive', 'magazine']),
  align: PropTypes.oneOf(['left', 'right', 'center']),
  children: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)])
};
export default Title;