import PropTypes from 'prop-types';
import { IconContext as PhosphorContext } from '@phosphor-icons/react';

/**
 * The `@phosphor-icons/react` library takes advantage of React Context to make
 * applying a default style to all icons simple. Any props passed to this
 * `IconContext` component will be automatically passed to each icon rendered
 * within the context. If you nest contexts a component will use the nearest
 * context in its ancestry.
 *
 * ```js
 *
 * import { IconContext } from '@politico/interactive-style';
 * ```
 */
const IconContext = function IconContext(props) {
  const {
    children,
    ...value
  } = props;
  return <PhosphorContext.Provider value={value}>
      {children}
    </PhosphorContext.Provider>;
};
IconContext.defaultProps = {
  color: 'currentColor',
  size: undefined,
  weight: 'regular',
  mirrored: undefined
};
IconContext.propTypes = {
  /**
   * Icon stroke/fill color. This can be a named color in our system or any CSS
   * color string, including hex, rgb, rgba, hsl, hsla, named colors, or the
   * special currentColor variable.
   */
  color: PropTypes.string,
  /**
   * Icon height & width. As with standard React elements, this can be
   * a number, or a string with units in px, %, em, rem, pt, cm, mm, in.
   */
  size: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
  /**
   * Icon weight/style. Can also be used, for example, to "toggle" an icon's
   * state: a rating component could use Stars with `weight="regular"` to
   * denote an empty star, and `weight="fill"` to denote a filled star.
   */
  weight: PropTypes.oneOf(['thin', 'light', 'regular', 'bold', 'fill', 'duotone']),
  /**
   * Flip the icon horizontally. Can be useful in RTL languages where normal
   * icon orientation is not appropriate.
   */
  mirrored: PropTypes.bool,
  /**
   * Children to render within the context.
   */
  children: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)]).isRequired
};
export default IconContext;