import { Box } from '../box'
import { useStyleConfig } from '../core'
import { Icon } from '../icon'
import { cs } from '../utils'
import { BreadcrumbsSeparatorProps } from './breadcrumbs.types'
import { useBreadcrumbsContext } from './context'

/** Breadcrumbs separator. */
export const BreadcrumbsSeparator = ({ className, children, content, ...rest }: BreadcrumbsSeparatorProps) => {
  const styles = useStyleConfig('Breadcrumbs', useBreadcrumbsContext())

  return (
    <Box alignItems="center" className={cs('vui-breadcrumbs-separator', className)} p={0} {...rest}>
      {content || children || <Icon name="falAngleRight" {...styles.separator} />}
    </Box>
  )
}

export default BreadcrumbsSeparator
