import React from 'react'

import { useStyleConfig, vui } from '../core'
import Icon, { IconProps } from '../icon'
import { cs } from '../utils'
import { useListContext } from './context'

/** Displays an icon on the side of the ListItem. */
export const ListIcon = vui<'svg', IconProps>((props, ref) => {
  const { className, ...rest } = props
  const styles = useStyleConfig('List', useListContext())

  return <Icon className={cs('vui-listIcon', className)} ref={ref} {...styles.icon} {...rest} />
})

ListIcon.displayName = 'ListIcon'
export default ListIcon
