import React from 'react'

import { Box } from '../box'
import { omitThemingProps, useStyleConfig } from '../core'
import { cs } from '../utils'
import { useSidemenuContext } from './context'
import { SidemenuTopProps } from './sidemenu.types'

/** Top container. */
export const SidemenuTop = (props: SidemenuTopProps) => {
  const { className, leftSlot, rightSlot, ...rest } = omitThemingProps(props)
  const styles = useStyleConfig('Sidemenu', props)
  const { isExpandedHorizontally } = useSidemenuContext()

  if (!leftSlot && !rightSlot) return null

  return (
    <Box className={cs('vui-sidemenu-top', className)} mb={1} w="100%" {...styles.sidemenuTop} {...rest}>
      {!!leftSlot && leftSlot}
      {!!rightSlot && isExpandedHorizontally && rightSlot}
    </Box>
  )
}

SidemenuTop.displayName = 'SidemenuTop'

export default SidemenuTop
