import { styled, vui } from '../core'
import { cs } from '../utils'
import { TabProps } from './tabs.types'

export const TabBase = styled.divBox`
  width: 100%;
`

/**
 * Implements a Tab component
 */
export const Tab = vui<'div', TabProps>(({ children, className }, ref) => (
  <TabBase className={cs('vui-tab', className)} ref={ref}>
    {children}
  </TabBase>
))

Tab.displayName = 'Tab'

export default Tab
