import { Box } from '../box'
import { omitThemingProps, useStyleConfig, vui, VuiComponent } from '../core'
import { cs } from '../utils'
import { BreadcrumbsItemProps } from './breadcrumbs.types'
import { useBreadcrumbsContext } from './context'

/** A Breadcrumb item. */
export const BreadcrumbsItem = vui<'div', BreadcrumbsItemProps>((props, ref) => {
  const { className, children, ...rest } = omitThemingProps(props)
  const styles = useStyleConfig('Breadcrumbs', useBreadcrumbsContext())
  return (
    <Box
      alignItems="center"
      className={cs('vui-breadcrumbs-item', className)}
      p={0}
      ref={ref}
      {...styles.item}
      {...rest}
    >
      {children}
    </Box>
  )
}) as VuiComponent<'div', BreadcrumbsItemProps>

BreadcrumbsItem.displayName = 'BreadcrumbsItem'

export default BreadcrumbsItem
