import React from "react";
import root from "react-shadow";

import { Style } from '../Style'

export const ShadowRoot = (props) => {
  const { tag, getStyles, children, ...otherProps } = props
  const Tag = root[tag]

  return (
    <Tag {...otherProps}>
      {children}
      <Style>{getStyles()}</Style>
    </Tag>
  )
}

ShadowRoot.defaultProps = {
  tag: 'span'
}
