/* eslint-disable react-native-a11y/has-valid-accessibility-role */
import React from 'react'
import PropTypes from 'prop-types'
import { View, StyleSheet } from 'react-native'

export const OrderedListBase = React.forwardRef(({ children, ...rest }, ref) => (
  <View accessibilityRole="list" ref={ref} style={staticStyles.container} {...rest}>
    {children}
  </View>
))

OrderedListBase.propTypes = {
  /**
   * A list of ordered items wrapped in `OrderedListBase.Item`.
   */
  children: PropTypes.node.isRequired
}

OrderedListBase.displayName = 'OrderedList'

const staticStyles = StyleSheet.create({
  container: {
    flexDirection: 'column',
    margin: 0,
    padding: 0
  }
})