import { useId } from 'react';
import PropTypes from 'prop-types';
import OutlineFilterSvg from '../OutlineFilterSvg';

/**
 * A convenience component that renders an `OutlineFilterSvg` and applies the
 * filter to its children. By default, this component wraps its children in a
 * `<span>` because outlining inline text is a very common use-case for this
 * component, but you can control the element that gets rendered with the `as`
 * prop.
 *
 * ### When should you use this component and when should you render `OutlineFilterSvg` directly?
 *
 * You have the most flexibility and control when you render `OutlineFilterSvg`
 * directly. In an ideal world, each instance of `OutlineFilterSvg` would
 * render a unique variant of this filter, changing the color, radius, or
 * opacity, so if you have dozens of elements to which you are applying the
 * exact same filter, you should probably render one `OutlineFilterSvg` that
 * they can all reference. Using this component can be more convenient though,
 * so use it if it suits your needs and you are only applying a filter to a
 * small number of elements.
 */
const OutlineFilter = function OutlineFilter(props) {
  const {
    as: Tag,
    bg,
    radius,
    opacity,
    children
  } = props;
  const id = useId();
  const svgId = `OutlineFilterSvg--${id}`;
  return <Tag style={{
    filter: `url(#${svgId})`
  }}>
      <OutlineFilterSvg id={svgId} bg={bg} radius={radius} opacity={opacity} />
      {children}
    </Tag>;
};
OutlineFilter.defaultProps = {
  as: 'span',
  bg: 'white',
  radius: 1,
  opacity: 1,
  children: undefined
};
OutlineFilter.propTypes = {
  /**
   * Control which kind of tag or component is used to wrap the children of
   * this component. If you use a custom component it should accept and
   * handle a `style` prop that sets inline styles.
   */
  as: PropTypes.elementType,
  /**
   * The color to use for the outline created by this filter. This prop accepts
   * either a color name provided by this library or a CSS color value.
   */
  bg: PropTypes.string,
  /**
   * The radius of the outline in pixels.
   */
  radius: PropTypes.number,
  /**
   * The opacity of the outline, between 0 and 1.
   */
  opacity: PropTypes.number,
  /**
   * The children to which we should add the outline.
   */
  children: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)])
};
export default OutlineFilter;