import { forwardRef } from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import classes from './styles.module.scss';

/**
 * Renders a standard dek, which is a title regular 400 on desktop and sans
 * regular component 400 on mobile.
 *
 * ```js
 *
 * import { Dek } from '@politico/interactive-style';
 * ```
 */
const Dek = forwardRef((props, ref) => {
  const {
    as: Tag,
    outlet,
    align,
    children
  } = props;
  return <Tag ref={ref} className={classnames(classes.dek, classes[`outlet-${outlet}`], classes[`align-${align}`])}>
      {children}
    </Tag>;
});
Dek.displayName = 'Dek';
Dek.defaultProps = {
  as: 'div',
  outlet: 'interactive',
  align: undefined,
  children: undefined
};
Dek.propTypes = {
  /**
   * Specify what kind of element to render as the dek.
   */
  as: PropTypes.elementType,
  /**
   * Specify the outlet style to use for the dek text.
   */
  outlet: PropTypes.oneOf(['interactive', 'magazine']),
  /**
   * Specify the text alignment of the text.
   */
  align: PropTypes.oneOf(['left', 'right', 'center']),
  /**
   * The content of the dek.
   */
  children: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)])
};
export default Dek;