import { Box } from '../box'
import { omitThemingProps, useStyleConfig } from '../core'
import { cs } from '../utils'
import { collapsedWidth } from './consts'
import type { SidemenuTopPropsV2 } from './sidemenuV2.types'

/** Top container. */
export const SidemenuTopV2 = (props: SidemenuTopPropsV2) => {
  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>
  )
}

SidemenuTopV2.displayName = 'SidemenuTopV2'

export default SidemenuTopV2
