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

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

  if (!leftSlot && !rightSlot) return null

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

SidemenuTop.displayName = 'SidemenuTop'

export default SidemenuTop
