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

const getAccessibilityRole = () =>
  Platform.select({
    ios: 'listitem',
    android: 'none',
    web: 'listitem'
  })

export const OrderedListItemBase = React.forwardRef(({ children, style, ...rest }, ref) => (
  <View
    accessibilityRole={getAccessibilityRole()}
    ref={ref}
    style={[staticStyles.container, style]}
    {...rest}
  >
    {children}
  </View>
))

OrderedListItemBase.propTypes = {
  /**
   * Item content
   */
  children: PropTypes.node.isRequired,
  /**
   * Item custom styles
   */
  style: PropTypes.object
}

OrderedListItemBase.displayName = 'OrderedListItemBase'

const staticStyles = StyleSheet.create({
  container: {
    display: 'flex'
  }
})