import * as React from 'react';

import { Icon } from './index';

/**
 * @name IconWrapper
 * @description We've taken the common elements of our "Icons" and abstracted
 * them into a single component, this while it may not seem like a lot, when
 * repeated over 36 times, it adds up.
 */
const IconWrapper: React.FC<Icon> = (props) => {
  const { children, description, title, ...rest } = props;

  return (
    <svg {...rest} viewBox="0 0 50 50">
      {title && <title>{title}</title>}
      {description && <desc>{description}</desc>}
      {children}
    </svg>
  );
};

IconWrapper.defaultProps = {
  color: '#fff',
  fill: '#f00',
  height: 50,
  width: 50
};

export { IconWrapper as default, IconWrapper };