import React from 'react'
import PropTypes from 'prop-types'
import { ListItem as ListItemBase, Typography } from '@telus-uds/components-base'

const ListItem = React.forwardRef(({ children, title, ...rest }, ref) => (
  <ListItemBase ref={ref} {...rest}>
    {Boolean(title) && <Typography variant={{ size: 'h4' }}>{title}</Typography>}
    {children}
  </ListItemBase>
))

ListItem.displayName = 'ListItem'

ListItem.propTypes = {
  children: PropTypes.node.isRequired,
  title: PropTypes.string
}

export default ListItem