import React from 'react'

import Box from '../box'
import { omitThemingProps, useStyleConfig, vui } from '../core'
import { cs } from '../utils'
import { PanelProps } from './panel.types'

/**
 * Displays static or partially interactive content, such as text, images or buttons.
 * Supports use cases of showing multiple segments of a page, each focusing on different data type or context.
 */
export const Panel = vui<'div', PanelProps>((props, ref) => {
  const { className, ...rest } = omitThemingProps(props)
  const styles = useStyleConfig('Panel', props)

  return <Box bg="white" className={cs('vui-panel', className)} p={2} ref={ref} {...styles} {...rest} />
})

Panel.displayName = 'Panel'

export default Panel
