import React from 'react'
import PropTypes from 'prop-types'
import { ListItemBase } from './ListItemBase'
import { useThemeTokens } from '../ThemeProvider/useThemeTokens'
import { getTokensPropType } from '../utils/props/tokens'
import { variantProp } from '../utils/props/variantProp'

/**
 * ListItem is responsible for rendering icon or a bullet as side item
 */
export const ListItem = React.forwardRef(
  ({ tokens, variant, children, title, iconVerticalAlign = 'top', ...listItemProps }, ref) => {
    const themeTokens = useThemeTokens('List', tokens, variant)
    return (
      <ListItemBase
        tokens={themeTokens}
        ref={ref}
        {...listItemProps}
        title={title}
        iconVerticalAlign={iconVerticalAlign}
      >
        {children}
      </ListItemBase>
    )
  }
)
ListItem.displayName = 'ListItem'

ListItem.propTypes = {
  /** Theme tokens for styling */
  tokens: getTokensPropType('List'),
  /** Variant configuration for the component */
  variant: variantProp.propType,
  /** Content to be rendered within the list item */
  children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired,
  /** Title of the list item */
  title: PropTypes.node,
  /** Controls the vertical alignment of the icon */
  iconVerticalAlign: PropTypes.oneOf(['top', 'center', 'bottom']),
  /** Icon to be displayed */
  icon: PropTypes.elementType,
  /** Color of the icon */
  iconColor: PropTypes.string,
  /** Size of the icon */
  iconSize: PropTypes.number
}