import React from 'react'
import { View, StyleSheet } from 'react-native'
import PropTypes from 'prop-types'

/**
 * 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) => (
  <View ref={ref} style={staticStyles.stretch}>
    {children}
  </View>
))
Legend.displayName = 'Legend'

Legend.propTypes = {
  children: PropTypes.node
}

const staticStyles = StyleSheet.create({
  stretch: {
    width: '100%',
    flexGrow: 1
  }
})