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

export const TdBase = styled.tdBox`
  transition-duration: fast;
`

/** Displays a cell inside Table row. */
export const Td = vui<'td', TdProps>((props, ref) => {
  const { className, level = 0, children, ...rest } = props
  const styles = useStyleConfig('Table', useTableContext())

  return (
    <TdBase className={cs('vui-td', className)} px={2} ref={ref} {...styles.td} {...rest}>
      {!!level && (
        <T mr={1}>
          {Array.from({ length: level }).map((_i, key) => (
            <T key={key}>&mdash;</T>
          ))}
        </T>
      )}
      {children}
    </TdBase>
  )
})

Td.displayName = 'Td'

export default Td
