import React from 'react'

import { styled, useStyleConfig, vui } from '../core'
import { cs } from '../utils'
import { useTableContext } from './context'
import { TfootProps } from './table.types'

export const TfootBase = styled.tfootBox``

/** Displays Table footer. */
export const Tfoot = vui<'tfoot', TfootProps>((props, ref) => {
  const { className, ...rest } = props
  const styles = useStyleConfig('Table', useTableContext())

  return <TfootBase className={cs('vui-tfoot', className)} ref={ref} {...styles.tfoot} {...rest} />
})

Tfoot.displayName = 'Tfoot'

export default Tfoot
