import React from 'react'
import PropTypes from 'prop-types'

import { cssReset } from './cssReset'

/**
 * On Web, wraps children in HTML `<legend>` tag.
 * On Native, `<legend>` does not exist, wraps in a width 100% block to follow <legend>'s behaviour in a flex.
 */
export const Legend = React.forwardRef(({ children }, ref) => (
  <legend ref={ref} style={cssReset}>
    {children}
  </legend>
))
Legend.displayName = 'Legend'

Legend.propTypes = {
  children: PropTypes.node
}