import React from 'react'
import PropTypes from 'prop-types'
import styled from 'styled-components'
import ItemBase from './ItemBase'

const StyledList = styled.ol({
  display: 'flex',
  flexDirection: 'column',
  listStylePosition: 'inside',
  margin: 0,
  padding: 0
})

/**
 * Semantic ordered list.
 */
const OrderedListBase = React.forwardRef(({ children, start = 1, ...rest }, ref) => (
  <StyledList {...rest} ref={ref} start={start}>
    {children}
  </StyledList>
))
OrderedListBase.displayName = 'OrderedList'

OrderedListBase.propTypes = {
  /**
   * A list of ordered items wrapped in `OrderedListBase.Item`.
   */
  children: PropTypes.node.isRequired,
  /**
   * The position to start the list with.
   */
  start: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
}

OrderedListBase.Item = ItemBase

export default OrderedListBase